it-swarm.com.de

Wie kann ich das Zoomen auf einer mobilen Webseite "deaktivieren"?

Ich erstelle eine mobile Webseite, die im Grunde genommen eine große Form mit mehreren Texteingaben ist.

Allerdings zoomt jedes Mal, wenn ich auf eine Eingabe klicke (zumindest auf meinem Android -Handy), die gesamte Seite und verdeckt den Rest der Seite. Gibt es einen HTML- oder CSS-Befehl, um diese Art des Zoomens auf mobilen Webseiten zu deaktivieren?

293
Martín Fixman

Dies sollte alles sein, was Sie brauchen

<meta 
     name='viewport' 
     content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' 
/>
405
kgutteridge

Für diejenigen von Ihnen, die zu spät zur Party kommen, funktioniert die Antwort von kgutteridge bei mir nicht und Benny Neugebauers Antwort enthält target-densitydpi (ein Feature, das veraltet ist ).

Dies funktioniert jedoch für mich:

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

Hier gibt es eine Reihe von Ansätzen, und obwohl die Position lautet, dass ) Benutzer normalerweise nicht eingeschränkt werden sollten , wenn es um Zoomen geht Aus Gründen der Barrierefreiheit kann es Fälle geben, in denen Folgendes erforderlich ist:

Die Seite in der Breite des Geräts rendern, nicht skalieren:

<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 aller Zooms, aller Skalierungen

<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" />
49
SW4

Sie können verwenden:

<head>
  <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
  ...
</head>

Beachten Sie jedoch, dass mit Android 4.4 die Eigenschaft target-densitydpi wird nicht mehr unterstützt . Daher wird für Android 4.4 und höher Folgendes als bewährte Methode empfohlen:

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

Da es für das erste Problem noch keine Lösung gibt, habe ich hier zwei Cent reines CSS.

Mobile Browser (die meisten von ihnen) erfordern eine Schriftgröße in Eingaben von 16px. Damit

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

löst das Problem. Sie müssen also den Zoom und die Barrierefreiheit Ihrer Website nicht deaktivieren.

Wenn Ihre Basisschriftgröße nicht 16px oder nicht 16px bei Mobiltelefonen beträgt, können Sie Medienabfragen 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;
  }
}
20
Azamat Rasulov

bitte füge dieses Meta-Tag und diesen Stil hinzu

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


<style>
body{
        touch-action: manipulation;
    }
</style>
9
Sarath Ak

Mögliche Lösung für Web-Apps: Während das Zoomen in iOS Safari nicht mehr deaktiviert werden kann, wird deaktiviert, wenn die Site über eine Verknüpfung auf dem Startbildschirm geöffnet wird.

Fügen Sie diese Meta-Tags hinzu, um Ihre App als "Web App-fähig" zu deklarieren:

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta name='Apple-mobile-web-app-capable' content='yes' />

nur Verwenden Sie diese Funktion, wenn Ihre App sich selbst unterhält, da die Vorwärts-/Rückwärtsschaltflächen und die URL-Leiste sowie die Freigabeoptionen deaktiviert sind. (Sie können trotzdem nach links und rechts wischen) Dieser Ansatz ermöglicht jedoch ziemlich die App wie UX. Der Vollbild-Browser startet nur, wenn die Site vom Homescreen geladen wird. Ich habe es auch erst zum Laufen gebracht, nachdem ich eine Apple-touch-icon-180x180.png in meinen Stammordner aufgenommen habe.

Als Bonus möchten Sie wahrscheinlich auch eine Variante davon einbinden:

<meta name='Apple-mobile-web-app-status-bar-style' content='black-translucent'/>
1
denkquer

Sie können die Aufgabe erledigen, indem Sie einfach das folgende 'Meta'-Element in Ihren' Kopf 'einfügen:

<meta name="viewport" content="user-scalable=no">

Das Hinzufügen aller Attribute wie 'width', 'initial-scale', 'maximum-width' und 'maximum-scale' funktioniert möglicherweise nicht. Fügen Sie daher einfach das obige Element hinzu.

1