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

Es liegt wahrscheinlich daran, dass der Browser versucht, den Bereich zu zoomen, da die Schriftgröße unter dem Schwellenwert liegt, was im Allgemeinen beim iPhone der Fall ist.

Die Angabe eines Metatag-Attributs "user-scalable=no" schränkt den Benutzer beim Zoomen an anderer Stelle ein. Da das Problem mit Wählen Sie Element, versuchen Sie, die folgenden in Ihrem css, dieser Hack ist ursprünglich für jquery mobile verwendet.

HTML :

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

CSS:

select{
font-size: 50px;
}

src: Unzoom nach der Auswahl in iphone

Answer 2

User-scalable=no ist das, was Sie brauchen, damit es tatsächlich eine definitive Antwort auf diese Frage gibt

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Answer 3

Das iPhone zoomt Formularfelder leicht, wenn der Text auf weniger als 16 Pixel eingestellt ist. . Ich würde vorschlagen, den Text des mobilen Formularfeldes auf 16 Pixel einzustellen und dann die Größe für den Desktop wieder zu überschreiben.

Die Antworten, die besagen, dass der Zoom deaktiviert werden soll, sind nicht hilfreich für die Barrierefreiheit / sehbehinderte Nutzer möchten auf kleineren Handys vielleicht trotzdem zoomen.

Ejemplo:

# Mobile first
input, textarea, select {
  font-size: 16px;
}

# Tablet upwards
@media (min-width: 768px) {
  font-size: 14px;
}

Answer 4

Dies schien in meinem Fall zu funktionieren, um dieses Problem zu lösen:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
select:focus, textarea:focus, input:focus {
        font-size: 16px;
    }
}

Vorgeschlagene aquí von Christina Arasmo Beymer

Answer 5

Ich bin zwar ein bisschen spät dran, aber ich habe einen ziemlich guten Workaround gefunden, der dieses Problem nur mit CSS-Manipulationen löst. In meinem Fall konnte ich die Schriftgröße aus Designgründen nicht ändern und auch das Zoomen konnte ich nicht deaktivieren.

Da das iPhone Formularfelder leicht vergrößert, wenn der Text auf weniger als 16 Pixel eingestellt ist, können wir das iPhone austricksen, damit es denkt, dass die Schriftgröße 16 Pixel beträgt, und sie dann in unsere Größe umwandelt.

Zum Beispiel, nehmen wir das Beispiel, wenn unser Text ist 14px, so tut es Zoom, weil es kleiner ist als 16px. Daher können wir die Skala umwandeln, nach 0,875.

Im folgenden Beispiel habe ich die Polsterung hinzugefügt, um zu zeigen, wie man andere Eigenschaften entsprechend umwandelt.

.no-zoom {
    font-size: 16px;
    transform-origin: top left;
    transform: scale(0.875);            //  14px / 16px
    padding: 4.57px;                    // 4px / 0.875
}

Ich hoffe, es hilft!