Wie kann ich den Zoom auf einer mobilen Webseite "deaktivieren"?

Question

Ich erstelle eine mobile Webseite, die im Grunde ein großes Formular mit mehreren Texteingaben ist.

Allerdings wird (zumindest auf meinem Android-Handy) jedes Mal, wenn ich auf eine Eingabe klicke, die gesamte Seite vergrößert, wodurch der Rest der Seite verdeckt wird. Gibt es einen HTML- oder CSS-Befehl, um diese Art von Zoom auf mobilen Webseiten zu deaktivieren?

Answer 1

Das sollte alles sein, was Sie brauchen:

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

Answer 2

Für diejenigen unter Ihnen, die zu spät dran sind: Die Antwort von kgutteridge funktioniert bei mir nicht, und die Antwort von Benny Neugebauer enthält target-densitydpi (a Funktion, die veraltet ist ).

Für mich funktioniert das jedoch:

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

Answer 3

Hier gibt es eine Reihe von Ansätzen - und obwohl der Standpunkt lautet, dass Typische Nutzer sollten nicht eingeschränkt werden Wenn es um das Zoomen aus Gründen der Zugänglichkeit geht, kann es Fälle geben, in denen dies erforderlich ist:

Die Seite wird in der Breite des Geräts gerendert, nicht skaliert:

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

Verhindern Sie die Skalierung - und verhindern Sie, dass der Benutzer zoomen kann:

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

Entfernen des Zooms und der Skalierung

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

Answer 4

Es scheint, dass das Hinzufügen von Meta-Tags zu index.html das Zoomen der Seite nicht verhindert. Das Hinzufügen des untenstehenden Stils wird die Magie bewirken.

:root {
  touch-action: pan-x pan-y;
  height: 100% 
}

EDIT: Demo: https://no-mobile-zoom.stackblitz.io

Answer 5

Mobile Browser (die meisten) verlangen, dass die Schriftgröße in Eingaben 16px beträgt.

Und da es immer noch keine Lösung für das ursprüngliche Problem gibt, hier eine reine CSS-Lösung.

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  font-size: 16px;
}

löst das Problem. Sie brauchen also nicht den Zoom zu deaktivieren und die Zugänglichkeitsfunktionen Ihrer Website zu verlieren.

Wenn Ihre Basis-Schriftgröße nicht 16px oder nicht 16px auf Handys ist, können Sie Media-Queries verwenden.

@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"] {
    font-size: 16px;
  }
}