Rigel-Computer


Fenstergröße per jQuery abfragen

Mit diesem Snippet lässt sich die aktuelle Bildschirmauflösung abfragen, um mit ihr - in diesem Falle per jQuery - für die Smartphone-Ansicht eine Weiche einzubauen, die in Zusammenhang mit anderen Conditions auch wirklich nur bei kleinen Bildschirmen angezogen wird.

if (document.body.offsetWidth < 500) {
##AKTION##
}

.
.
.

Eleganter, weil man NICHT an ZWEI Stellen die Fensterbreite pflegen muss:

Man legt ein Dummy-DIV #FOO ins HTML-Template

<div id="FOO"></div>

Dies wird nun im CSS, das unterhalb des @media screen fürs Smartphone liegt, auf "sichtbar" gesetzt
(parallel natürlich für die Desktop-Ansicht auf display: none;)

@media screen and (max-width : 500px) {
#FOO {
display: inline;
}
}

Die Sichtbarkeit fragt man dann im jQuery ab:

      if ($("#FOO").is(':visible')) {
      ##AKTION##
      }

Effekt:

Die ###AKTION### wird automatisch per jQuery ausgeführt, sobald die Smartphone-Ansicht bei Laden der Seite angezogen wird, 
OHNE dass die Fensterbreite separat ausgelesen werden muss.