Wie kann ich den Zoom auf einer mobilen Webseite „deaktivieren“?

Lesezeit: 6 Minuten

Wie kann ich den Zoom auf einer mobilen Webseite „deaktivieren
Martin Fixmann

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

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

  • Ich stimme zu, dass es für die meisten Websites nicht deaktiviert werden sollte, aber es gibt einige Anwendungsfälle, in denen Sie das standardmäßige Zoomen möglicherweise deaktivieren möchten – z. B. mobile Webspiele, bei denen Sie das Zoomen möglicherweise überschreiben möchten, um etwas anderes zu tun.

    – Lukas

    15. Januar 2014 um 3:16 Uhr

  • Für Android-Firefox-Benutzer gibt es die Immer Zoom für Firefox hinzufügen Auf. Sehr empfehlenswert.

    – Colin D. Bennett

    10. März 2015 um 3:55 Uhr

  • Von iOS 10, user-scalable=no wird ignoriert. Sieh dir das an

    – Raubvogel

    6. Dezember 2016 um 2:57 Uhr

  • Ich deaktiviere den Zoom für ein Canvas-Projekt. Das Zoomen könnte die Algorithmen hinter der Animation durcheinander bringen. Ich stimme zu, Entwickler müssen die Benutzerfreundlichkeit berücksichtigen, bevor sie den Zoom deaktivieren. Passen Sie Schriftgröße und Seitenstruktur entsprechend an. Die vmin CSS-Maßeinheit ist hier hilfreich. Ich empfehle auch die Verwendung von Prozentsätzen und vh und vw.

    – www139

    25. Dezember 2016 um 18:48 Uhr


  • Wir verwenden eine Chromium-Browsersteuerung für unsere Kiosk-Desktop-Anwendung. Wenn Benutzer Pinch-Zoom machen können, kann uns das viele Probleme bereiten. Leider haben die folgenden Lösungen bei mir nicht funktioniert, und jetzt versuche ich, den Befehl –disable-pinch zu verwenden.

    – Ein Khudairy

    20. Februar 2019 um 9:24 Uhr

Wie kann ich den Zoom auf einer mobilen Webseite „deaktivieren
kutteridge

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">

  • Dies deaktiviert auch die Fähigkeit des Benutzers zum Zoomen im Allgemeinen 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 „Zoom-on-Input-Click“ zu deaktivieren. Verhalten.

    – matt lohkamp

    29. März 2011 um 19:49 Uhr

  • Im Moment hat jemand bei Posterous genau das getan, während er die Schriftart bei 12 Pixel hat, sodass sie nicht lesbar ist und ich keinen Weg finden kann, sie zu umgehen.

    – Emil Iwanow

    1. Dezember 2011 um 7:05 Uhr

  • Jede sehbehinderte Person, mich eingeschlossen, hasst das mehr als alles andere. Ich muss Screenshots von Seiten machen, die dies tun, und sie dann im Bildbetrachter vergrößern.

    – Jack Marchetti

    21. November 2013 um 2:10 Uhr

  • Was macht das zweite Meta-Tag? Ist das nicht width=device-width bereits im ersten Meta-Tag?

    – Lukas

    15. Januar 2014 um 3:13 Uhr

  • Dies scheint unter iOS 7 nicht zu funktionieren. Siehe lukad03-Antwort

    – david

    8. Mai 2014 um 19:09 Uhr

1646047930 301 Wie kann ich den Zoom auf einer mobilen Webseite „deaktivieren
Lukas Keller

Für diejenigen unter Ihnen, die zu spät zur Party kommen, funktioniert die Antwort von kgutteridge bei mir nicht und die Antwort von Benny Neugebauer enthält target-densitydpi (a 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" />

  • Das ist jetzt die richtige Antwort. Die anderen Antworten funktionieren nicht mehr (zumindest für iOS 7).

    – Kyle Farris

    17. März 2014 um 20:28 Uhr


  • Hat jemand das unter iOS 10.x versucht, ich glaube nicht, dass es funktioniert?

    – JMac

    13. April 2017 um 2:06 Uhr

  • Funktioniert immer noch nicht unter Safari/iOS 11 aufgrund des SFB-Problems bei Apple.

    – 15ee8f99-57ff-4f92-890c-b56153

    21. März 2018 um 15:27 Uhr

  • Buchstäblich kein Unterschied zwischen den beiden Antworten.

    – Schmack

    29. August 2020 um 21:14 Uhr

  • Es gibt einen kleinen Unterschied – die Antwort von kgutteridge hat user-scalable=0 anstatt user-scalable=no. Welchen Unterschied es macht, bin ich mir nicht sicher.

    – Hashim Aziz

    10. August 2021 um 18:42 Uhr


Hier gibt es eine Reihe von Ansätzen – und obwohl die Position so ist Normalerweise sollten Benutzer nicht eingeschränkt werden 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 sie nicht:

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

Skalierung verhindern – und verhindern, dass der Benutzer zoomen kann:

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

Alles Zoomen, alles Skalieren entfernen

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

  • „Normalerweise sollten Benutzer nicht eingeschränkt werden“, aber bei der Entwicklung von Web-Apps für Mobilgeräte muss man sich oft mit dem „Zoom-in auf Eingabefokus“ auseinandersetzen. Ich finde es hilfreich, in diesem Fall das Zoomen zu deaktivieren.

    – Le’nton

    18. September 2015 um 22:45 Uhr

  • @Le’nton Das Deaktivieren des Zoomens auf der gesamten Seite ist keine gute Möglichkeit, mit dem Vergrößern des Eingabefokus umzugehen. Zumindest unter iOS kann der Eingabefokus-Zoom deaktiviert werden, indem die Schriftgröße der Eingabe erhöht wird.

    – pfg

    7. Februar 2020 um 22:55 Uhr

  • when developing web apps for mobile you often have to deal with the "zom-in on input focus" Damit müssen Sie sich nicht befassen, aber die App sollte so konzipiert sein, dass sie mit dieser Funktion zusammenarbeitet. Diese Art von Funktionen wurde speziell entwickelt, um die Benutzererfahrung (UX) zu verbessern, und basiert auf Best Practices, um Benutzern zu helfen.

    – Bartek

    20. Juli 2021 um 13:21 Uhr


1646047931 290 Wie kann ich den Zoom auf einer mobilen Webseite „deaktivieren
Asamat Rasulov

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

Und da es noch keine Lösung für die Erstausgabe 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 müssen also nicht den Zoom deaktivieren und die Barrierefreiheitsfunktionen Ihrer Website verlieren.

Wenn Ihre Basisschriftgröße nicht 16 Pixel oder auf Mobilgeräten nicht 16 Pixel 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;
  }
}

1646047932 676 Wie kann ich den Zoom auf einer mobilen Webseite „deaktivieren
Benny Neugebauer

Sie können Folgendes verwenden:

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

Aber bitte beachten Sie das mit Android 4.4 die Eigenschaft target-densitydpi wird nicht mehr unterstützt. Für Android 4.4 und höher wird daher Folgendes als Best Practice vorgeschlagen:

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

  • Das funktioniert bei mir nicht. Meine Website ist immer noch in FF auf Android skalierbar.

    – Henrik

    26. Juni 2020 um 9:55 Uhr

Scheint, als würde das bloße 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

  • Das funktioniert bei mir nicht. Meine Website ist immer noch in FF auf Android skalierbar.

    – Henrik

    26. Juni 2020 um 9:55 Uhr

Wie kann ich den Zoom auf einer mobilen Webseite „deaktivieren
Sarah Ak

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>

  • sollte nicht touch-action eingestellt werden nonedeveloper.mozilla.org/en-US/docs/Web/CSS/touch-action#Values

    – rahulroy9202

    21. November 2018 um 8:47 Uhr

  • @rahulroy9202 für mich touch-action: manipulation; funktionierte gut. touch-action: none; nichts getan

    – Umair

    26. Juli 2019 um 22:03 Uhr

887770cookie-checkWie kann ich den Zoom auf einer mobilen Webseite „deaktivieren“?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy