CSS - Media-Queries für mobile Devices - Teil 3

Mobile Anzeigegeräte können sich auch noch in der Orientierung ändern. Damit ist gemeint, dass der Anwender das Gerät im Hochformat (Portrait-Modus) oder auch im Querformat (Landscape-Modus) halten kann. Idealerweise passt sich auch hier das Layout automatisch an. Klarerweise verhält sich ein Tablet im Portrait-Modus ähnlich wie ein Smartphone.

Weitere Anpassung für Mobile Devices

Beispiel

@media only screen and (min-device-width: 768px) and (max-device-width:
1024px) and (orientation: portrait) {
/* Stile für Tablets im Portrait-Modus /*
}

Erläuterung

Bei diesem Beispiel wird die minimale (mit min-device-width) und die maximale (mit max-device-width) Anzeigebreite geprüft. Wenn diese zwischen 768 und 1.024 Pixel liegt, dann erfolgt die Prüfung auf die Ausrichtung. Wenn dann die Ausrichtung (orientation) zusätzlich im Hochformat-Modus (portrait) vorliegt, werden die definierten Stile angewendet. Bei nachfolgendem Beispiel wird dieselbe Media-Query eingesetzt, aber auf die Ausrichtung im Querformat überprüft.

Beispiel

@media only screen and (min-device-width: 768px) and (max-device-width:
1024px) and (orientation: landscape) {
/* Stile für Tablets im Landscape-Modus /*
}

Wenn Sie beide Media-Queries in ein Stylesheet einbauen, erreichen Sie eine dynamische Änderung des Layouts der Webseite, je nachdem wie der Anwender seine Anzeigeeinheit dreht.

Weitere Hinweise

Die Browserunterstützung ist erst bei modernen Browsern gegeben. Besonders mobile Devices mit Internet Explorer können die Media-Queries erst ab der Version 9.0 nutzen. Um die Zoom-Funktion und den Anfangszoom festzulegen, kann folgendes meta- Element im head-Bereich notiert werden.

//maximaler Zoom für Android-Geräte
<meta name="viewport" content="width=device-width; initial-scale=1.3;
minimum-scale=1.3; maximum-scale=1.3; "/>
//Zoom auf 100% einstellen und Zoom-Funktion deaktivieren
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;" />

Referenzinformationen

CSS-Regeln @media: