Media Queries-Pendant in Javascript?

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:

Code:

---

@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?

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

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

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

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

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

Gruß
Nikolas

Zitat:

---

Zitat von andreasisaak

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/ ?

Zitat:

---

Zitat von Nina

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.

Hallo Nina,

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

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

Code:

---

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.

Wäre bei dieser Alternative das

Code:

---

$(document).width()

---

nicht besser?

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

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

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

Zitat:

---

Zitat von andreasisaak

… ansonsten vllt gleich ein ordentliches polyfill nehmen.

---

Habe ich doch direkt verlinkt? ;)

Kann sein.