Sollte ich user-scalable deaktivieren, um "versehentliches" Zoomen zu verhindern?

Im Allgemeinen nein – das Blockieren von Pinch-to-Zoom hindert sehbehinderte Besucher daran, zum Lesen Ihres Inhalts hineinzuzoomen, was von Barrierefreiheitsrichtlinien beanstandet wird (WCAG 1.4.4). Beheben Sie stattdessen Layout-Probleme, statt Zoom zu deaktivieren.

Was bewirkt viewport-fit=cover genau?

Auf Geräten mit Notch oder abgerundeten Ecken lässt es den Hintergrund Ihrer Seite in diese Safe-Area-Bereiche hineinreichen, statt einen schwarzen Balken zu hinterlassen, während Sie mit den env(safe-area-inset-*)-CSS-Funktionen dafür sorgen, dass der eigentliche Inhalt frei von der Notch bleibt.

Ist width=device-width immer richtig?

Für die überwiegende Mehrheit responsiver Seiten ja – es sorgt dafür, dass der CSS-Viewport der natürlichen Breite des Geräts entspricht, sodass Ihre responsiven Breakpoints vorhersehbar funktionieren.

Kategorie: Entwicklung

Viewport-Meta-Generator

Eigene IdeeTool fehlt?

Erstellen Sie ein responsives Viewport-Meta-Tag und verstehen Sie seine Optionen

Legen Sie Breite, Anfangszoom, Zoomgrenzen, Pinch-Zoom-Berechtigung und viewport-fit für das Viewport-Meta-Tag Ihrer Seite fest, mit einer kurzen Erklärung jeder Option, und kopieren Sie das fertige Tag in Ihr <head>. Lokal in Ihrem Browser erstellt.

BreiteNormalerweise "device-width", damit das Layout der CSS-Pixelbreite des Bildschirms entspricht.AnfangszoomDie Zoomstufe beim ersten Laden; 1 bedeutet kein Zoom.Minimaler ZoomMaximaler ZoomLeer lassen, damit Besucher frei zwischen beliebigen Grenzen zoomen können.Viewport-Anpassung"cover" lässt Inhalte auf unterstützten Geräten in Notch-/Safe-Area-Bereiche hineinreichen.

Pinch-Zoom erlauben (user-scalable)

Wird dies deaktiviert, ist Pinch-to-Zoom blockiert, was der Barrierefreiheit schadet – die meisten Seiten sollten es aktiviert lassen.

Meta-Tag

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

Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.

Wozu dieses Werkzeug dient

Das Viewport-Meta-Tag teilt einem mobilen Browser mit, wie eine Seite skaliert und dimensioniert werden soll – ohne dieses Tag rendern Smartphones Seiten in einer festen, desktopähnlichen Breite und zoomen heraus, weshalb es eines der ersten Dinge ist, nach denen ein Mobilfreundlichkeits-Check sucht. Mit width=device-width und initial-scale=1 ist der übliche Fall abgedeckt, aber die Zoomgrenzen und die viewport-fit-Optionen verdienen es, verstanden statt blind kopiert zu werden, da das vollständige Deaktivieren von Zoom ein Barrierefreiheitsproblem für sehbehinderte Nutzer ist.

So funktioniert es

Lassen Sie width auf "device-width", sofern kein bestimmter Grund für eine Änderung besteht.
Legen Sie einen Anfangszoom fest und optional minimale/maximale Zoomgrenzen.
Entscheiden Sie, ob Pinch-to-Zoom erlaubt sein soll – aktiviert lassen wird empfohlen.
Wählen Sie einen viewport-fit-Wert, falls Ihr Design in Notch- oder Safe-Area-Bereiche hineinreichen muss.
Kopieren Sie das erzeugte Tag in das <head> Ihrer Seite.

Datenschutz

Dieses Werkzeug läuft vollständig in Ihrem Browser. Ihre Eingabe wird nie hochgeladen, gespeichert oder weitergegeben – beim Schließen des Tabs ist sie weg.

Häufig gestellte Fragen

Sollte ich user-scalable deaktivieren, um "versehentliches" Zoomen zu verhindern?: Im Allgemeinen nein – das Blockieren von Pinch-to-Zoom hindert sehbehinderte Besucher daran, zum Lesen Ihres Inhalts hineinzuzoomen, was von Barrierefreiheitsrichtlinien beanstandet wird (WCAG 1.4.4). Beheben Sie stattdessen Layout-Probleme, statt Zoom zu deaktivieren.
Was bewirkt viewport-fit=cover genau?: Auf Geräten mit Notch oder abgerundeten Ecken lässt es den Hintergrund Ihrer Seite in diese Safe-Area-Bereiche hineinreichen, statt einen schwarzen Balken zu hinterlassen, während Sie mit den env(safe-area-inset-*)-CSS-Funktionen dafür sorgen, dass der eigentliche Inhalt frei von der Notch bleibt.
Ist width=device-width immer richtig?: Für die überwiegende Mehrheit responsiver Seiten ja – es sorgt dafür, dass der CSS-Viewport der natürlichen Breite des Geräts entspricht, sodass Ihre responsiven Breakpoints vorhersehbar funktionieren.