Enquire.js ermöglicht es JavaScript basierend auf dem aktiven Media Query auszulösen.
Warum Enquire.js?
Möchte man mit einer Code-Base und der Hilfe von Media Queries eine Website für diverse Devices optimieren, kommen bei komplexeren Websites schnell die Anforderungen auf, dass für ein Smartphone anderes Abläufe im JavaScript nötig sind wie für eine Desktop-Darstellung. Mal wird z.B. aus einer Galerie eine Slide-Show oder ganze Blöcke von Inhalten werden optimiert per Ajax angefordert. Möchte man unnötigen und doppelten Code elegant vermeiden, bietet sich das Triggern von JavaScript-Functions basierend auf Media Queries an - Enquire.js vereinfacht dies.
Setup und Abhängigkeiten
Nachdem Enquire.js in die Seite eingebunden wurde, ist dieses direkt lauffähig und benötigt auch keine Library wie jQuery.
Allerdings benötigt man ein Polyfill für die MatchMedia-API um den IE 8 und 9 abzudecken.
Anwendungsbeispiel
Angenommen wir wollen ab einer Device-Auflösung von 768px eine spezielle Sidebar für Mobile laden. Statt das nötige HTML vorzuhalten und per CSS einzublenden, laden wir die komplette Sidebar per Ajax. Das Gerüst von Enquire.js könnte so aussehen:
enquire.register("screen and (min-width: 768px)", {
// Wenn die Site auf einer kleinen Auflösung aufgerufen wird...
match : function() {
// ... (Code) Sidebar-HTML mit Ajax-Call laden und Sidebar darstellen.
},
// Wenn die Auflösung größer wird...
unmatch : function() {
// ... (Code) Sidebar ausblenden
}
});