HTML Kein Zoom auf Mobil

Question

Auf meiner Website zaxapps Wenn Sie auf einen der Eingänge oder Felder klicken, zoomt es auf mobilen Geräten.

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

Ich habe diesen Code hinzugefügt, aber es verhindert es. Irgendwelche Ideen?

Answer 1

Dies wird dadurch verursacht, dass die Website aufgrund der geöffneten Tastatur denkt, dass sich die Ausrichtung von Hochformat zu Querformat geändert hat.

Die Tastatur deckt einen Teil der Website ab, die den Bildschirmgrund einnimmt, der eine ausreichende Änderung der Auflösung verursacht, damit sie als Querformat erkannt wird. Wenn die Tastatur irgendwie ausgeblendet ist oder eine Bluetooth-Tastatur angeschlossen ist, sieht die Website korrekt aus. Ich habe Screenshots angehängt, um das Problem zu veranschaulichen.

Nach einigem Suchen fand ich this site. Es scheint, dass das Hinzufügen einer orientation Medienabfrage diese Auflösungslücke lösen kann. Hier ist ihr Beispiel für das iPhone 6 im Portrait:

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) { /* STYLES GO HERE */ } 

Update: Auch this CSS-Tricks page Check-out, sie haben ähnliche Informationen mit mehr Cross-Plattform-Beispielen.

---

Mit Tastatur offen:

Mit Tastatur versteckt (I simuliert dies durch eine Bluetooth-Tastatur verbinden):