JS-Helper für responsive bzw. adaptive Layouts
Responsives Design ist inzwischen Mindestanforderung fast sämtlicher Webprojekte. Klar, die gleiche Webanwendung soll natürlich auf Mobilgerät, Tablet und Desktop betrachtet werden können. Ein einheitliches Layout, welches "einfach" auf die unterschiedlichen Darstellungsgrößen runterbricht, wird allerdings den Anforderungen und Möglichkeiten der jeweiligen Geräte kaum gerecht. So ist es z.B. oft unmöglich das gleiche Bild bzw. Foto über alle Layoutbreiten zu verwenden, ohne, dass Bildinformationen wegfallen, Objekte (oder Personen) an- oder gar abgeschnitten werden oder ein Querformatbild in der Mobilansicht zum Panzerschlitz zusammenschnurrt.
So kommt es immer häufiger vor, dass wir in der Entwicklung nicht nur über Style-Angaben auf die unterschiedlichen Geräte-Größen bzw. Breakpoints reagieren müssen, sondern auch auf JavaScript-Ebene unterschiedliche Funktionen anhand der Breite des Gerätes ausführen müssen.
Da unsere Entwicklungen hauptsächlich auf Bootstrap basieren (mit einigen Erweiterungen des Rasters) haben wir uns hierfür eine kleine JavaScript Library geschrieben, um auch im JavaScript auf die unterschiedlichen Device-Größen reagieren zu können. Diesen Ansatz wollen wir hier kurz vorstellen:
JS-helper für responsive/adaptive Layouts
Im Fokus der Überlegungen stand die Einfachheit und die Kompatibilität zu Bootstrap.
Das Bootstrap Raster arbeitet bereits mit Prefixen für die unterschiedlichen Größen (`md`, `lg` etc). Es ist naheliegend, die Überwachung der Device-Größen auch anhand dieser Breakpoints vorzunehmen.
Die Library besteht aus 2 Teilen, der erste Teil überprüft bei einer Änderung der Browserweite, ob sich der Breakpoint ändert (z.B. von "md" auf "sm") und sendet ein entsprechendes Event. So können wir z.B. auch auf das Drehen eines Tablets (hoch zu querformat) reagieren.
$(window).on('breakpointchanged', function(event, info) {
//der breakpoint hat sich geändert von info.lastBreakpoint zu info.newBreakpoint
//info.Retina enthält einen Bool wert der angibt ob es sich um ein x2 Device handelt
})Der zweite Teil bietet einige Funktionen, um Breakpoints zu überprüfen. Wir haben beispielsweise die Möglichkeit abzufragen, ob ein Gerät größer, kleiner oder gleich einer gewissen Zielgröße ist, bzw.ob es sich innerhalb eines gewissen Spielraums bewegt:
var bp = $.bp.current(); //liefert den aktuellen Breakpoint
if ($.bp.up('sm')) {
//größer oder gleich sm
}
if ($.bd.down('sm')) {
//kleiner oder gleich sm
}
if ($.bp.match('sm')) {
//entspricht sm
}
if ($.bp.between('sm', 'lg')) {
//entweder sm, md oder lg
}Einer regelmäßiger Anwendungsfall ist beispielsweiße das Laden unterschiedlicher Bilder für unterschiedliche Devices:
<img class="responsive-image" src="fallback.jpg" data-sm="sm.jpg" data-md="md.jpg" etc.. />Der JavaScript Code sieht (vereinfacht) in etwa so aus:
$(window).on('breakpointchanged', function(event, info) {
var $img = $('.responsive-image');
var path = $img.data(info.newBreakpoint);
if (path) {
$img.src(path)
}
})