Laden und Entladen von JavaScript mit CSS Media Queries im Auge

ich CSS Media Queries bin mit meiner Website ansprechbar für die Herstellung:Laden und Entladen von JavaScript mit CSS Media Queries im Auge

@media (min-width:1200px) { 
    // DESKTOP STYLING 
} 

@media (max-width:1200px) { 
    // MOBILE STYLING 
}

I https://github.com/paulirish/matchMedia.js verwendet für Medien Abfrage

if(min-width:1200px) { 
    // DESKTOP JAVASCRIPT 
} else { 
    // MOBILE JAVASCRIPT 
}

Also zunächst zu prüfen, alles funktioniert gut, wenn mein Bildschirm ist < 1200px zeigt es mobile Version, wenn es höher ist, zeigt es Desktop-Version (Javascript funktioniert auch).

Problem jetzt ist, wenn ich Ändern der Größe des Fensters zum Beispiel starten:

1) LOADS DESKTOP JAVASCRIPT (EVERYTHING IS FINE) 
2) RESIZE WINDOW < 1200px (SWITCH TO MOBILE TEMPLATE) 
    LOADS MOBILE JAVASCRIPT (SITE BREAKS) 
3) RESIZE WINDOW > 1200px (SWITCH TO DESKTOP TEMPLATE) 
    LOADS DESKTOP JAVASCRIPT A SECOND TIME (SITE BREAKS EVEN MORE)

So war ich irgendwelche Ideen fragen, wie zu ‚entladen‘ JavaScript oder vielleicht eine elegante Art und Weise zwei verschiedene JavaScript-Dateien zu geladen haben je nachdem, welche Medien Abfrage wird verwendet?

Quelle

2012-03-30 jay7

Vielleicht versuchen Sie mit jQuery Mobile. http://jquerymobile.com/ ... Auch technisch brauchen Sie kein JavaScript, um eine Website reaktionsfähig zu machen. Alles kann mit CSS und flüssigen Layouts erreicht werden. Könntest du bitte ein bisschen mehr darüber erzählen, wie das JavaScript ins Spiel kommt? –

Nun, ich benutze kein JavaScript um die Seite ansprechbar zu machen. Ich mache das nur mit CSS (Media Queries, wo ich zwei separate Vorlagen entworfen habe). Da die mobile Version und die Desktop-Version dieselben DOM-Elemente verwenden, versucht das JavaScript dennoch, die Diashow beispielsweise auszuführen. Das ist ein Problem, weil die meisten interaktiven Elemente in der mobilen Version vereinfacht werden. So haben Sie statt einer Diashow nur statische Bilder. – jay7

Okay, ich verstehe. Entschuldigung, ich habe die ganze Situation missverstanden. –

Zuerst kann man einen JavaScript hat (zusammen die 2 zusammen) und eine Steuerung hat, die werden überprüfen, ob Ihre Fenstergröße größer ist oder nicht als 1200.

Oder Sie könnten versuchen, die JavaScipt Dateien in zwei Objekte zu wickeln , und erstellen Sie eine dritte, die als Controller behandelt wird. Über Ajax können Sie die Dateien laden und entladen (nichts bricht, weil Sie den Controller noch dort haben) und zwischen ihnen wechseln. Dies ist jedoch ein Problem, da Sie alle Listener entfernen müssen, wenn Sie den Schalter wechseln, und Sie müssen eine andere Datei laden, die wenig Zeit in Anspruch nimmt.

Hoffe, das hilft. Nette Frage übrigens.

Quelle

2012-03-30 20:04:01 helly0d

Danke für die Antwort, helly0d. Nun, irgendwie hoffte es gab einen einfacheren Weg, es zu tun. Aber ich denke, das ist der einzige Weg. Wäre kein Problem, wenn die Javascript-Datei sehr klein wäre, außerdem muss ich alle Handler lösen. Es scheint so schrecklich viel extra Code für einen einfachen Schalter :) – jay7

Warum brauchen Sie übrigens zwei Skripte für verschiedene Größen? Können Sie die Funktionen der Skripte nicht so allgemein wie möglich gestalten und Parameter setzen? Oder laden Sie unterschiedliche HTML-Steuerung durch diese 2 Skripte? – helly0d

Ich würde eine Bibliothek wie Enquire.js empfehlen, Sie könnten die Auslöser immer selbst codieren, aber wenn Sie eine "Desktop-Diashow" und eine "mobile Diashow" haben, müssen Sie sicherstellen, dass Sie die Inaktive auf zerstören resize und Inquire hat eine nette API, die einen Unmatch-Trigger enthält.

Ich habe das gleiche Slideshow Plugin für meine "Desktop Slideshow" und eine "mobile Slideshow", möchte aber verschiedene Einstellungen (zB mit einem unten ausgerichteten Pager gegenüber einer nächsten/vorherigen Navigation) Legen Sie beim Laden der Seite, aber was passiert, wenn das Gerät Medien fragt Breakpoints bei Orientierungsänderung, etc.

Quelle

2013-05-02 17:44:53

Laden und Entladen von JavaScript mit CSS Media Queries im Auge

Antwort

Verwandte Themen