Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Media Queries und JavaScript

Sonntag, 11. November 2012

Media Queries und JavaScript? Was hat das miteinander zu tun?

[Wikipedia:]

Bei Media Queries handelt es sich um ein Konzept, welches mit CSS3 eingeführt wurde und das Prinzip des Medientyps in CSS2 erweitert. Anstatt starr zu definieren, welches Medium das Zielmedium ist, können mit Media Queries die Eigenschaften des aktuellen Gerätes direkt abgefragt werden.

Mit Media Queries werden CSS Stylesheets oder einzelne CSS Anweisungen gezielt je nach den im aktuellen Gerät verfügbaren Eigenschaften (z. B. Monitorgröße) vergeben. Grundvoraussetzung für Responsive Design.
Was aber, wenn abhängig vom Client nicht nur CSS-Eigenschaften vergeben, sondern z. B. JavaScript ausgeführt werden soll?
Hier hilft ein Trick:
Mittels getComputedStyle und getPropertyValue können einzelne Style Deklarationen abgefragt werden.
Nehmen wir an, per Media Queries wurde ein CSS Stylesheet aufgerufen mit folgender Deklaration:

body {max-width:320px;}

Dann lässt sich die Eigenschaft max-width des body-Elements mit folgendem JavaScript auslesen und abhängig davon JavaScript Code ausführen:

<script type="text/javascript">
var mod = window.getComputedStyle(document.body).getPropertyValue('max-width');
if (mod == '320px') {
… auszuführender JavaScript Code
}
</script>

Hinweis: Der Internet Explorer versteht diese Syntax (ebenso wie Media Queries) erst ab Version 9.



Kommentare

Noch keine Beiträge.

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE