Mit JavaScript prüfen, ob ein CSS media query ausgeführt wurde

CSS:

@media (min-width: 45em) {
	body:after {
		content: 'widescreen';
		display: none;
	}
}

JavaScript:

var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
if (size == 'widescreen') {
	// go nuts
}

(via: bricss.net)

Die genialsten Lösungen sind immer die einfachen. Auf die kommt man aber nie selbst.

Edit: Funktioniert wohl derzeit nur im Chrome/Chromium (Version 18 und 19 getestet). Siehe auch Kommentare.

trenc am 3. Mai 2012 |

Kommentar

  1. # - bongo schrieb am 24. Mai 2012, 16:28:

    IE9: klappt nit
    FF11: klappt nit
    Chrome19.x: klappt

    <script language=“javascript”>
    if (size == ‘widescreen’) { document.writeln(‘jepp’);
    } else { document.writeln(‘nein’);
    }
    </script>
    <style> body {display:block;}</style>

    Traue niemandem, der sowas im Source-Code stehen hat:
    <!—[if lt IE 9]><div class=“IENotice”>YOUR BROWSER SUCKS!! Haha …

    Gruß
    Bo

  2. # - trenc schrieb am 25. Mai 2012, 12:31:

    Meh.

    Da hast natürlich Recht. Sehr ärgerlich.

    Danke für die Info.





Textile-Hilfe