Da Mobile-Geräte in der Regel einen kleineren Monitor haben als man es Desktop-Computer gewohnt ist, ist es nicht überraschend, dass der Viewport für die Mobilen-Geräte meistens viel zu groß ist und die Website in den kleinen Monitor gequetscht wird. Wenn es kein spezielles Mobile-Template gibt, dann ist dieser Vorgang erstmal okay, wenn man allerdings ein extra Template erstellt hat und der Viewport dennoch zu groß ist, sollte man diesen anpassen.
Der Viewport kann entweder als Meta-Tag im Head-Bereich oder als CSS-Angabe gesetzt werden.
Beispiel im Head:
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
Beispiel in CSS:
@viewport { width: device-width; zoom:1; } |
Breite des Viewport bestimmen
Die Breite ist eigentlich schon die wichtigste Eigenschaft des Viewports und kann mit der Eigenschaft „width“ bestimmt werden.
<meta name="viewport" content="width=930" /> |
Am sinnvollsten ist es allerdings dem Browser den Viewport selbstständig anhand der Monitor-Breite setzen zu lassen, in dem man anstatt einer festen Breite „width“ auf „device-width“ setzt.
<meta name="viewport" content="width=device-width" /> |
Möchte man die Höhe beeinflussen, kann man „content“ um „initial-scale=1“ ergänzen:
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
Da der Viewport durch „device-width“ sowieso auf 100% gesetzt wird, ist die Angabe allerdings überflüssig.
Das ranzoomen durch den Benutzer unterbinden
Meist ist es möglich auch in einer optimierten Version noch ranzuzoomen, oder der Browser macht dies selbstständig z.B. bei Formularen auf der Seite. Um diese Möglichkeit zu unterbinden hilft der kleiner Zusatz bei den Viewport Content-Eigenschaften: „user-scalable=no“
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> |
Sollte man sich in älteren Mobile-Versionen daran stören, dass beim Wechsel ins Querformat in die Seite hinein gezoomt wird, kann man den Viewport noch um die Eigenschaften „minimum-scale und maximum-scale“ ergänzen. Mehr dazu im Artikel iPhone / iPad Skalierungsproblem beim drehen ins Querformat
