Im Artikel Responsive Webdesign mit CSS3 Media Queries wurden die Integration der Media Queries erläutert, die für die unterschiedlichen Darstellungen der verschiedenen Display-Größen wichtig sind.

Allerdings müssen noch zusätzliche Anpassungen getätigt werden, damit die Angaben in den Media Queries auch für mobile Geräte übernommen werden.

 

Warum werden Media Queries für mobile Geräte nicht interpretiert?

Als das erste Smartphone iPhone auf dem Markt kam, waren die Websites kaum dafür optimiert. Websites wurden oder werden immer noch auf eine imaginäre Desktop-Breite gerendert, sodass die Website als kleine Darstellung im Smartphone angezeigt wird. Es muss den mobilen Geräten mitgeteilt werden, dass die Website nicht größer als die zur Verfügung stehende Bildschirmbreite sein darf.

Apple hat für dieses Problem die Meta-Eigenschaft viewport entwickelt, mit der die imaginären Breiten in den Media Queries auf die Abmessung des mobilen Geräts eingestellt werden.

Das Meta-Tag viewport von Apple wurde dann auch von den anderen Herstellern übernommen, sodass es schon eine Art Standard ist.

 

Zusätzliche Anpassungen für mobile Geräte mit Viewport Meta-Tag

Damit die Einstellungen in den Media Queries erkannt werden, muss folgender Code in den HEAD-Bereich des HTML-Dokuments:

<meta name="viewport" content="width=device-width">

Mit diesem Code und den Media Queries kann z. B. beim iPhone die Breite jetzt richtig auf 320px gerendert werden.

 

Landscape Modus mit Viewport Meta-Tag

Wenn man das Gerät nun in den  Landscape-Modus dreht, wird aktuell die Website einfach nur vergrößert dargestellt, genau wie bei einer nicht mobil optimierte Website.

Es kann aber unter Umständen Sinn machen die größere Breite für einen Layoutwechsel zu nutzen. Das erreichen Sie z. B. mit der folgenden erweiterten Angabe im Viewport Meta-Tag:

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

Mit diesem Code teilen Sie dem Browser mit, dass die Seite beim Aufruf nicht mehr als 100 % skalieren soll.

Haben Sie Fragen oder Probleme bei dem Viewport Meta-Tag für Responsive Webdesign? Gerne helfen wir Ihnen weiter. Kontaktieren Sie uns einfach.