Viewport Meta-Tag

Der Viewport Meta-Tag kann die Darstellungs-Auflösung und die Skalierung festlegen.
Diese Eigenschaften ist wichtig, wenn es um das Ansprechen mobiler Endgeräte geht.

Die Angabe width=device-width bewirkt, dass als Seiten-Breite die Breite (Hoch- oder Querformat!) des Viewports gesetzt wird, – und nicht 980px, welche das iPhone als Default annimmt (Android-Default: 800px im sog. "overview mode").

Tiny Viewport

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

Viewport Properties

width             = [pixel_value | device-width ] 
height            = [pixel_value | device-height] 
initial-scale     = float_value 
minimum-scale     = float_value 
maximum-scale     = float_value 
user-scalable     = [yes | no] 
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

target-densitydpi nur mit Android!

Meta-tag Support

iPhone, Android, webOS (Palm), IE Mobile, Opera Mini und Opera Mobile.

Pinch Zooming – Werte

initial-scale=1.0    der anfängliche Zoomgrad (von >0 bis 10.0), default: 1.0
minimum-scale=1.0    minimalen Zoomgrad einschränken (von >0 bis 10.0), default: 0.25
maximum-scale=1.0    maximalen Zoomgrad einschränken (von >0 bis 10.0), default: 5.0
user-scalable=no     zoomen erlauben: yes|no, default 'yes'

Zooming verhindern

Beispiel mit 230% Skalierung und Zoomen nicht erlaubt:
width=device-width, initial-scale=2.3, user-scalable=no

→ Verhindern des Zooming wird aus Accessibility Gründen nicht empfohlen!

Weitere Links