Media Queries-Pendant in Javascript?

[Nina]

Kann mir jemand einen Tipp geben, wie ich innerhalb eines Javascript-Blocks bestimmten Code nur ab einer bestimmten Bildschirmbreite ausgebe?

In CSS hätte ich das so geschrieben:

@media only screen and (min-width: 768px) { ... hier der eigentliche CSS-Block .... }

Gibt es eine vergleichbar einfache Art das in einem Javascript abzufragen und den JS-Code dann entsprechend nur für Bildschirme ab dieser Breite auszugeben?
Idealerweise vielleicht noch so, dass ein Orientation-Wechsel vom JS auch erkannt wird und ggf. dann das JS greift, wenn die neue Breite den Wert erreicht?

[andreasisaak]

Brauchte ich noch nicht oft aber wenn, dann hat es sehr gute Arbeit geleistet. Finde ich sehr intuitiv zu schreiben:

http://wicky.nillia.ms/enquire.js/g

[Nikolas]

Da fällt mir jetzt nur das jQuery Skript jRespond ein: https://github.com/ten1seven/jRespond

Gruß
Nikolas

Gesendet von meinem PadFone 2 mit Tapatalk 2

[andreasisaak]

Ja das kenne ich auch aber enquire.js ist zum Glück nicht an ein Framework gebunden. Das ist der grösste Vorteil.

[Nikolas]

Kannte ich noch nicht. Schau ich mir glatt mal an. Danke ;-)

P.S. Hatte deinen Beitrag grad noch gar nicht gelesen

Gruß
Nikolas

[Nina]

http://wicky.nillia.ms/enquire.js/g

Führt bei mir zu einem 404. Der korrekte Link ist wohl http://wicky.nillia.ms/enquire.js/ ?

[andreasisaak]

Führt bei mir zu einem 404. Der korrekte Link ist wohl http://wicky.nillia.ms/enquire.js/ ?

Ja ist es. Das /g muss wohl durch Copy&Paste reingekommen sein.

[ctnew]

Hallo Nina,

vielleicht hilft dir ja auch "Breakpoints" weiter: http://xoxco.com/projects/code/breakpoints/

[Bas]

Meine Mini-Lösung für solche Sachen:

function getScreenWidth() {
    $('body').css('overflow', 'hidden');
    var myWidth = $(window).width();
    $('body').css('overflow', 'visible');
    return myWidth;
}

(Das overflow:hidden ist nötig um die Breite inklusive eines evt. vorhanden Scrollbalkens zu ermitteln.)

Dazu dann entsprechende if-Abfragen und nen $(window).resize(function() { [...] }); und gut ist.

... ist allerdings Pixel-basiert.

[andreasisaak]

Wäre bei dieser Alternative das

$(document).width()

nicht besser?

[joe]

Oder mal http://www.springload.co.nz/love-the...ive-javascript anschauen

[FloB]

Gibt doch schon längst einen Standard: matchMedia (MDN tutorial, WPO, CanIUse, Polyfill).

[andreasisaak]

Ja wenn man den IE nicht braucht, ansonsten vllt gleich ein ordentliches polyfill nehmen.

[FloB]

… ansonsten vllt gleich ein ordentliches polyfill nehmen.

Habe ich doch direkt verlinkt?

[andreasisaak]

Kann sein.