Um moderne Webseiten auch auf Handys oder Tablet-PCs bedienbar zu machen benutzt man sogenannte „media queries". Diese Abschnitte definieren die Änderungen bei den CSS-Style abhängig von einer bestimmten Größe oder Ausrichtung de Bildschirms. Wie jedoch kann man in Javascript testen, ob ein bestimmter Style aktiv ist?
Üblicherweise folgen „media queries" auf die Definition der Seitenelemente (Container) und ändern z.B. Breiten, Laufweiten und Fontgrößen.
Auszug aus den Definitionen des Skeleton CSS Frameworks.
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
Über die „Portrait" & „Landscape" Queries kann man sogar bestimmen welche Styles Anwendung finden sollen wenn der Benutzer sein Gerät hochkant hällt.
/* Bilder im Breitmodus nach rechts neben den Text stellen */
@media only screen and (orientation : landscape) {
#main img { float: right; margin: 5px 0 10px 15px; }
}
/* Bilder im Hochkantmodus in eine eigene Zeile stellen */
@media only screen and (orientation : portrait) {
#main img { float: none; margin: 10px auto; }
}
Nun gibt es aber ein Problem wenn Javascript ins Spiel kommt. Häufig will man dann z.B. „PullDown"-Menüs gegen Listen oder Akkordeon-Menüs wechseln. Wie kann man feststellen welcher Style als aktiv ist? Die einfache Abfrage der Bildschirmbreite ist nicht sicher.
Die Lösung
Es gibt einen einfachen wie genialen Trick. Man setzt ein leeres SPAN Element an das Ende und definiert dann eine bestimmten Zustand. Im Beispiel „display" im Media Query.
@media only screen and (max-width: 767px) and (orientation : portrait) { #mobile display:none; }
Über die Abfrage des Display-Status des mobile Elementes kann man dann z.B. feststellen ob z.B. Portait oder Landscape vorliegt.
If (document.getElementById("mobile").display == 'none' ) {
alert(„Bitte drehen Sie Ihre Handy oder Tablet um 90 Grad");
}