Wie kann ich das Zoomen auf einer mobilen Webseite deaktivieren?

316

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

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

html css mobile Martín Fixman
quelle
3
Wie Greg oben sagte, wenn ich eine mobile Website betrete, die das Zoomen deaktiviert, drücke ich normalerweise zuerst die Zurück-Taste (es sei denn, ich muss sie wirklich anzeigen), und ich bin sicher, dass ich nicht der einzige bin . Aus meiner Erfahrung heraus verwenden die meisten Websites, auf denen das Zoomen deaktiviert ist, auch kleine Schriftarten, was das Lesen des Textes schwierig und sehr unangenehm macht.
tomasz86
8
Ich bin damit einverstanden, dass es für die meisten Websites nicht deaktiviert werden sollte, aber es gibt einige Anwendungsfälle, in denen Sie das Standard-Zoomen deaktivieren möchten - beispielsweise mobile Web-Spiele, bei denen Sie das Zoomen überschreiben möchten, um etwas anderes zu tun.
Luke
11
Sie nicht - Wenn Benutzer zoomen möchten, lassen Sie sie dies tun. Außerdem: Chrome hat die Option, Ihre Anfrage einfach zu ignorieren.
Martin
2
Für Android Firefox-Benutzer gibt es das Add-On Always Zoom für Firefox . Sehr empfehlenswert.
Colin D Bennett
2
Von iOS 10 , user-scalable=nowird ignoriert. Siehe dies
Raptor

Antworten:

443

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' 
/>
kgutteridge
quelle
23
Dies deaktiviert auch die Fähigkeit des Benutzers, im Allgemeinen zu zoomen, sowie die Fähigkeit des Browsers, die Art und Weise, wie die Seite in das Ansichtsfenster passt, automatisch anzupassen. Alles, was Martin sucht, ist eine Möglichkeit, das "Zoomen bei Eingabe-Klick" zu deaktivieren. Verhalten.
Matt Lohkamp
3
Im Moment hat jemand bei Posterous genau das getan, während die Schrift bei 12px war, so dass sie unlesbar ist und ich keinen Weg finde, sie zu umgehen.
Emil Ivanov
41
Jeder sehbehinderte Mensch, auch ich, hasst dies mehr als alles andere. Ich muss Screenshots von Seiten machen, die dies tun, und sie dann im Bildbetrachter vergrößern.
Jack Marchetti
6
Was macht das zweite Meta-Tag? Ist das nicht width=device-widthschon im ersten Meta-Tag?
Luke
1
Dies scheint unter iOS 7 nicht zu funktionieren. Siehe lukad03 Antwort
Davivid
159

Für diejenigen von euch, die zu spät zur Party kommen, funktioniert die Antwort von kgutteridge nicht für mich und Benny Neugebauers Antwort enthält Target-Density-Dpi (eine Funktion, die 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" />
Luke Keller
quelle
7
Dies ist jetzt die richtige Antwort. Die anderen Antworten funktionieren nicht mehr (zumindest für iOS 7).
KyleFarris
7
Hat jemand dies unter iOS 10.x versucht? Ich glaube nicht, dass es funktioniert.
JMac
Funktioniert bei mir nicht Es hat die Größe des gesamten Bildschirms mit Bildlaufleiste und schlechtem Zoom geändert.
Cocorico
1
Funktioniert aufgrund des SFB-Problems bei Apple immer noch nicht unter Safari / iOS 11.
15ee8f99-57ff-4f92-890c-b56153
52

Hier gibt es eine Reihe von Ansätzen - und obwohl die Position ist, dass Benutzer normalerweise nicht eingeschränkt werden sollten, wenn es um das Zoomen für Barrierefreiheitszwecke geht, kann es Fälle geben, in denen dies erforderlich ist:

Rendern Sie die Seite in der Breite des Geräts, skalieren Sie nicht:

<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 Zoom- und Skalierungsfunktionen

<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" />
SW4
quelle
"Normalerweise sollten Benutzer nicht eingeschränkt werden", aber bei der Entwicklung von Web-Apps für Mobilgeräte müssen Sie sich häufig mit dem "Zom-In für Eingabefokus" befassen. Ich finde es hilfreich, das Zoomen in diesem Fall zu deaktivieren.
Le 'nton
@ Le'nton Das Deaktivieren des Zooms auf der gesamten Seite ist keine gute Möglichkeit, um den Eingabefokus zu vergrößern. Zumindest unter iOS kann der Eingabefokus-Zoom deaktiviert werden, indem die Schriftgröße der Eingabe erhöht wird.
Pfg
39

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-densdpi nicht mehr unterstützt wird . Für Android 4.4 und höher wird Folgendes als Best Practice empfohlen:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
Benny Neugebauer
quelle
35

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

Für mobile Browser (die meisten von ihnen) muss die Schriftgröße in den Eingaben 16 Pixel betragen. Damit

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

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

Wenn Ihre Basisschriftgröße auf Mobiltelefonen nicht 16px oder nicht 16px 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;
  }
}
Erweitern Sie das Snippet

Azamat Rasulov
quelle
2
Warum hat diese Lösung so wenige Stimmen? Dies ist bei weitem der beste Weg, um das Zoomen von Formularen zu vermeiden.
KlausCPH
1
Ja; das hat auch mein problem gelöst! Ich wollte das Zoomen nicht vollständig deaktivieren und das war genau das, was ich brauchte.
brendan
1
Sie können auch font-size: 1remfür die gesamte Seite festlegen , damit die Schriftart gut skaliert wird und gleichzeitig das Problem des "Fokus auf Zoom" vermieden wird.
Itachi
12

Bitte versuchen Sie, dieses Meta-Tag und diesen Stil hinzuzufügen 

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


<style>
body{
        touch-action: manipulation;
    }
</style>
Sarath Ak
quelle
1
sollte nicht touch-actionauf none- developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Values
rahulroy9202
@ rahulroy9202 für mich hat gut touch-action: manipulation;funktioniert. touch-action: none;hat nichts getan
Umair
hat gut für mich funktioniert, danke.
ArifMustafa
7

Es scheint, als würde das Hinzufügen von Meta-Tags zu index.html das Zoomen der Seite nicht verhindern. Das Hinzufügen des folgenden Stils wird die Magie bewirken.

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

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

Api
quelle
2
Dies sollte behoben werden, auch auf mobilen Safari ios13 atm
Magico
Es funktioniert wie erwartet vom Handy, danke! Überprüfen Sie hier proyecto26.com/animatable-component
jdnichollsc
6

Mögliche Lösung für Web-Apps: Während das Zoomen in iOS Safari nicht mehr deaktiviert werden kann, wird es deaktiviert, wenn die Site über eine Verknüpfung zum 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' />

Verwenden Sie diese Funktion jedoch nur , wenn Ihre App selbsttragend ist, da die Vorwärts- / Rückwärtsschaltflächen und die URL-Leiste sowie die Freigabeoptionen deaktiviert sind. (Sie können jedoch immer noch nach links und rechts wischen.) Dieser Ansatz ermöglicht jedoch eine App wie ux. Der Vollbildbrowser wird erst gestartet, wenn die Site vom Startbildschirm geladen wird. Ich habe es auch erst zum Laufen gebracht, nachdem ich ein Apple-Touch-Symbol-180x180.png in meinen Stammordner aufgenommen habe.

Als Bonus möchten Sie wahrscheinlich auch eine Variante davon hinzufügen:

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

Sie können die Aufgabe erfüllen, 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 "Breite", "Anfangsskala", "Maximale Breite" und "Maximale Skalierung" funktioniert möglicherweise nicht. Fügen Sie daher einfach das obige Element hinzu.

Kasumi Gunasekara
quelle
-1 
<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

Bitte fügen Sie das Skript hinzu, um die Quetschung zu deaktivieren, tippen Sie auf den Fokus-Zoom

Prem
quelle