Deaktivieren Sie die Textvergrößerungslupe bei Berührung mit Mobile Safari / Webkit - iPhone, Webkit

Ich habe einige Elemente in meiner iPhone-Website, dieSie enthalten keinen Text, sondern müssen vom Benutzer angeklickt und festgehalten werden (DIVs). Dadurch wird die Textmarkierungs- / Bearbeitungsschleife / der Cursor angezeigt, was sehr ablenkend ist.

Ich weiß, dass es eine CSS-Regel zum Entfernen der Blackbox gibt, die bei anklickbaren Elementen angezeigt wird, wenn sie berührt werden. Gibt es so etwas, um die Textlupe zu deaktivieren?

Antworten:

47 für die Antwort № 1

Ich habe gerade eine Antwort vom Helpdesk des Developer Centers erhalten. Ich musste diese CSS-Regel hinzufügen:

-webkit-user-select: none;

---

6 für die Antwort № 2

Verwenden Sie diese CSS-Codes

-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */

---

5 für die Antwort № 3

Dies ist auch nützlich, wenn Sie Inhalte schützen möchten, die Sie nicht kopieren oder speichern möchten, z. B. ein Bild:

#yourdiv img {-webkit-touch-callout: none; }

---

3 für die Antwort № 4

Ich habe es herausgefunden, als ich es selbst ausprobiert habe. Zuerst müssen Sie diese Regel zum umschließenden Element hinzufügen:

-webkit-user-select: none;

Aber das allein reicht auf dem iPhone nicht aus. Es stellt sich heraus, dass die Lupe immer noch angezeigt werden kann, weil beispielsweise ein übergeordnetes Element eine Auswahl akzeptiert oder nur, weil es sich so anfühlt.

Allerdings habe ich dann etwas cooles entdeckt - wenn dein Element ein hinzufügt touchend und click Handler auf ein Element, dann Apples SafariVermeiden Sie schließlich den lästigen Codepfad, durch den die Lupe angezeigt wird, und stellen Sie möglicherweise fest, dass dieses Element für einige Benutzeroberflächeninteraktionen vorgesehen ist, und wählen Sie keinen Text aus. Wenn Sie dies für Elemente in der Nähe des oberen Bildschirmrandes tun, wird die Navigation im Querformat ebenfalls ausgeblendet! Sie sind sich jedoch nicht sicher, wie Sie das Erscheinen der Navigation abbrechen können, wenn Sie auf Elemente unten klicken. Hat jemand eine Lösung für diese?

---

3 für die Antwort № 5

Dies löste es für mich in JS:

document.getElementsByTagName("body")[0].addEventListener("touchstart",
function(e) { e.returnValue = false });

Scheint alles zu umgehen, was sich im Betriebssystem befindet, um die Berührung aufzufangen.

---

0 für die Antwort № 6

Fügen Sie dies dem CSS hinzu

body {
-webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
-webkit-user-select: none;                  /* prevent copy paste, to allow, change "none" to "text" */}

---