Optional ist die Ausführung von Javascript auf Basis von Media Queries

Ich versuche, herauszufinden, wie kann ich Optional führen Sie einen block von javascript-basierend auf dem aktuellen Gerät/Medien-Abfrage. Ich bin mit Twitter Bootstrap und haben im wesentlichen zwei Versionen von media queries:

@media (min-width: 980px) { ... } <!-- Desktops -->
@media (max-width: 979px) { ... } <!-- Smaller screens/tablets/phones -->

Habe ich eine Karte, die ich erzeugen, aber ich bin nicht zeigt es in der mobilen/kleinen Bildschirm version forb andwidth Gründen. Doch, das javascript noch im hintergrund ausführt, obwohl Sie es nicht sehen können auf dem Bildschirm des mobilen Geräts. Ich versuche also, einen Weg zu finden, in javascript, wo ich etwas tun kann, wie:

//Imaginary function
var screenType = getScreenType();

if(screenType == 1) {
   //Load map
}

Habe ich Lesen Sie über Menschen definieren von CSS-Eigenschaften, die bestimmte Werte in Ihren Medien Abfragen und dann versuchen zu finden dieses element in das DOM basierend auf dem CSS-Eigenschaft, aber es hat doch einen besseren Weg geben. Irgendwelche Ideen?

InformationsquelleAutor Jeremy Harris | 2012-10-22
  1. 2

    Wie über die Verwendung von javascript für, die?

    <script type="text/javascript">

if (screen.width < 980) { 

document.write('<link href="UrLowRes.css" type="text/css" />');

} else { 

document.write('<link href="UrlHighRes.css" type="text/css" />');

} 

</script>
    • Interessant, ich denke, dass dies eine akzeptable Lösung. Danke.
    • Wenn Sie Ihre Fenster Breite geändert werden kann, müssen Sie möglicherweise die überwachung für Fenster-Breite verpasst?
    • Mein primäres Anliegen ist nicht die Verschwendung von Bandbreite auf mobilen Geräten, also in diesem Fall die änderungen der Breite voraussichtlich nicht auf mein Ziel.
    • Bildschirm.Breite oder Bildschirm.Höhe befassen sich mit der Größe der Anzeige, nicht die Größe der Fenster. Die Größe der Anzeige ist durch die Feste hardware und können nicht geändert werden.
    • was ist, wenn das Gerät gedreht wird?
    • guter Punkt. Ich denke, der OP sollte prüfen, dass: entweder die Werte wieder den gleichen, unabhängig von der Ausrichtung der so etwas wie if (Math.Min(screen.width, screen.height)) {...}

    InformationsquelleAutor frenchie
  2. 20

    Die aktuelle akzeptierte Antwort ist nicht gut genug, sollten Sie überprüfen, Fenster.matchMedia

    Können Sie erkennen viewport-dimension änderungen, aber Sie müssen berechnen, Faktoren wie Orientierung und Seitenverhältnisse und es gibt keine Garantie dafür ist unsere Kalkulation passen unsere browser Annahmen, wenn es gilt, media query-Regeln.

    Ich meine, man kann Sie berechnen X, aber Ihr browser Annahme kann Y.
    Also ich denke, besser ist die Verwendung von gleichen browser Regeln, und Fenster.matchMedia tut es

    var jmediaquery = window.matchMedia( "(min-width: 480px)" )
if (jmediaquery.matches) {
    //window width is at least 480px
}
else {
    //window width is less than 480px
}

    Können Sie erhalten sogar die Abfragebenachrichtigung mit einem listener

    var jmediaquery = window.matchMedia("(orientation: portrait)");
jmediaquery.addListener(handleOrientationChange);
handleOrientationChange(jmediaquery);

function handleOrientationChange(jmediaquery) {
    if (jmediaquery.matches) {
        //orientation changed
    }
}

    Wenn Sie nicht mehr benötigen, um Benachrichtigungen über änderungen einfach removeListener () aufrufen

    jmediaquery.removeListener(handleOrientationChange);
    • Gute Idee! Vielen Dank für das halten dieser Frage auf dem neuesten Stand.
    • Die akzeptierte Antwort lässt nicht zu, dass Sie das Ergebnis überprüfen, wenn Sie die Größe Ihrer browser-Fenster, so dass für die Entwicklung von Zweck, diese Antwort ist besser. thks!
    • tolle Einblicke, +1
    • Das ist gut zu wissen! Danke!
    InformationsquelleAutor yeradis
  3. 12

    Finden Sie vielleicht die Enquire.js Bibliothek hilfreich:

    http://wickynilliams.github.com/enquire.js/

    CSS-Tricks Artikel: http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/

    • Sehr nützliche Bibliothek, obwohl ich mir denke, in meinem Fall, Reine Javascript ist wohl die leichteste Lösung. Dankend für den Hinweis Erkundigen Sie sich, obwohl, ich werde wahrscheinlich verwenden Sie es in Zukunft Vorhaben.
    InformationsquelleAutor Kevin Boucher
  4. 1

    Können Sie auch mit einem plugin namens minwidth:

    minwidth(940, function () {
  //do whatever you need
});

    Aber es funktioniert nur, wenn die Seite geladen wird, nicht wenn die Größe..

    http://edenspiekermann.com/en/blog/responsive-javascript-helpers

    InformationsquelleAutor Carlos Martinez T
Schreibe einen Kommentar