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

Versuchen Sie, dieses CSS hinzuzufügen, um das Standard-Styling von Ios zu deaktivieren:

-webkit-appearance: none;

Dies funktioniert auch bei anderen Elementen, die ein spezielles Styling erhalten, wie input[type=search].

Answer 2

Ich lese seit ein paar Stunden auf diese und die beste Lösung ist diese Jquery hier. Dies hilft auch mit der "nächste Registerkarte" Option in iOS Safari. Ich habe Eingaben hier als auch, aber fühlen Sie sich frei, sie zu entfernen oder hinzufügen, wie Sie möchten. Grundsätzlich feuert die Mousedown vor dem Fokus-Ereignis und Tricks der Browser zu denken, seine 16px. Darüber hinaus wird die focusout auf die "nächste Registerkarte" Funktion auslösen und den Prozess wiederholen.

$(function(){
    $('input, select').on("mousedown focusout", function(){
        $('input, select').css('font-size','16px');
    });
    $('input, select').on("focus", function(){
        $('input, select').css('font-size','');
    });
})