Das Hauptproblem besteht darin, dass, wenn der Benutzer außerhalb des Zoomfelds klickt, der Zoom gesperrt wird und er nicht hinein- oder herauszoomen kann.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Der Viewport ist der für den Benutzer sichtbare Bereich einer Webseite. Es variiert je nach Gerät und ist auf einem Mobiltelefon kleiner als auf einem Computerbildschirm.
Der Teil width=device-width legt die Breite des Darstellungsbereichs so fest, dass sie der Breite des Geräts folgt (die je nach Gerät unterschiedlich sein wird).
Der Teil initial-scale=1.0 legt die anfängliche Zoomstufe fest, wenn die Seite zum ersten Mal vom Browser geladen wird.
Der Teil maximum-scale=1.0 legt fest, wie weit der Benutzer in die Seite hineinzoomen darf. Ein Wert von 1.0 bedeutet, dass kein Zoomen erlaubt ist.
Der Teil user-scalable=no deaktiviert jegliches Zoomen, das möglicherweise standardmäßig auf einigen Geräten verfügbar ist (z. B. Doppeltippen zum Vergrößern).
So deaktivieren Sie Zoom auf einer mobilen Webseite
Verwenden Sie den folgenden Code, um den Zoom auf einer mobilen Webseite in HTML zu deaktivieren:
Dadurch wird die Seite an die Breite des Geräts angepasst, auf dem sie angezeigt wird.
Zoom aus
Um in HTML zu verkleinern, verwenden Sie die Zoom-Eigenschaft. Zum Beispiel:
Zoom: 1;
Deaktivieren Sie die HTML-Skalierung
Die HTML-Skalierung ist eine Funktion von HTML, die es Webbrowsern ermöglicht, die Größe von Text und Bildern zu vergrößern oder zu verkleinern, um sie auf kleineren oder größeren Bildschirmen besser lesbar zu machen. Diese Funktion kann in den meisten Browsern deaktiviert werden, indem die Eigenschaft html-scaling auf „none“ gesetzt wird.
