Verhindern, dass das iPhone bei der Auswahl in einer Web-App heranzoomt

Question

Ich habe diesen Code:

<select>
    <option value="c">Klassen</option>
    <option value="t">Docenten</option>
    <option value="r">Lokalen</option>
    <option value="s">Leerlingen</option>
</select>

Ausführung in einer bildschirmfüllenden Web-App auf dem iPhone.

Wenn Sie etwas aus dieser Liste auswählen, zoomt das iPhone auf das select -Element. Und zoomen Sie nicht wieder heraus, nachdem Sie etwas ausgewählt haben.

Wie kann ich das verhindern? Oder wieder herauszoomen?

Answer 1

IOS vergrößert die Seite, um ein größeres Eingabefeld anzuzeigen, wenn die Schriftgröße weniger als 16 Pixel beträgt.

Nur bei Klick auf ein beliebiges Feld wird die Seite gezoomt. Beim Klicken wird es also auf 16px gesetzt und dann auf den Standardwert geändert.

Das folgende Snippet funktioniert bei mir gut und ist für mobile Geräte geeignet,

@media screen and (max-width: 767px) {
 select:active, input:active,textarea:active{
        font-size: 16px;
 }
}

Answer 2

Versuchen Sie dies:

function DisablePinchZoom() 
{
    $('meta[name=viewport]').attr("content", "");
    $('meta[name=viewport]').attr("content", "width=yourwidth, user-scalable=no");
}

function myFunction() 
{
    $('meta[name=viewport]').attr("content", "width=1047, user-scalable=yes");
}

<select id="cmbYo" onchange="javascript: myFunction();" onclick="javascript: DisablePinchZoom();">
</select>

DisablePinchZoom wird vor dem onchange ausgelöst, so dass der Zoom zum Zeitpunkt des onchange deaktiviert wird. Am Ende der onchange-Funktion können Sie die Ausgangssituation wiederherstellen.

Getestet mit einem iPhone 5S

Answer 3

Alle 'select' Schriftgrößen auf 16px setzen

wählen{ Schriftgröße: 16px; }

Answer 4

Ich glaube nicht, dass man isoliert nichts gegen das Verhalten tun kann.

Sie können versuchen, die Seite überhaupt nicht zu zoomen. Das ist gut, wenn Ihre Seite für das Telefon konzipiert ist.

<meta name="viewport" content="width=device-width" />

Sie könnten auch versuchen, ein JavaScript-Konstrukt anstelle der allgemeinen "select"-Anweisung zu verwenden. Erstellen Sie ein verstecktes Div, um Ihr Menü anzuzeigen, und verarbeiten Sie die Klicks in Javascript.

Viel Glück!

Answer 5

Wie hier beantwortet: Automatisches Zoomen im Tag "Text" der Eingabe deaktivieren - Safari auf dem iPhone

Sie können verhindern, dass Safari während der Benutzereingabe automatisch in Textfelder hineinzoomt ohne Deaktivierung der Fähigkeit des Benutzers, den Zoom zu betätigen. Einfach hinzufügen maximum-scale=1 aber lassen Sie das in anderen Antworten vorgeschlagene Attribut "Benutzerskala" weg.

Diese Option lohnt sich, wenn Sie ein Formular in einer Ebene haben, die beim Zoomen "schwebt", was dazu führen kann, dass wichtige UI-Elemente vom Bildschirm verschwinden.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">