Media Queries: device-width & width – wo ist der Unterschied?

Responsive Design

Über Media Queries kann man die Breite des Browserfensters (= width) und die des gesamten Bildschirms (= device-width) abfragen. Wobei in der Praxis meist nicht zwischen diesen beiden Werten unterschieden wird, sie werden in einen Topf geworfen.
Dazu trägt man im Viewport-Metatag im head der Seite folgendes ein:

Diese Anweisung ist weit verbreitet, auch wir schreiben das so in unsere Themes. Aber genau genommen ist das ein Workaround: Nur wenn width=device-with dasteht, können Android-Geräte die Anweisung device-width überhaupt verstehen. Aber diese Methode hat auch ihre Nachteile.

Browserfenster-Breite ist nicht gleich Bildschirmbreite

Das Problem: Auf Desktop-Rechnern oder Laptops nimmt das Browserfenster so gut wie nie die gesamte Bildschirm ein. Im Gegenteil, das Browserfenster ist meist deutlich kleiner.
Das sollte man im Hinterkopf haben, wenn man die Breakpoints für ein Responsive Layout setzt. Es sollte immer noch etwas “Luft” nach oben sein.

Media Queries width und device-width

Ein Beispiel: Eine Seite soll für die Ansicht auf Laptops mit der Bildschirmbreite 1440px optimiert werden. Damit das in der Praxis gut funtioniert, sollte der Breakpoint – also die Breite, ab der das Layout  wechselt – deutlich unter der maximalen Breite von 1440px liegen, also zu Beispiel bei 1024 Pixeln.

Wobei im Alltag die Breite des Browserfensters oftmals noch unter 1024px liegen dürfte. Das heisst, es kann durchaus sinnvoll sein, den Breakpoint schon bei 800Pixel zu setzen.

Übrigens: Auch auf mobilen Geräten, auf denen das Browserfenster tatsächlich immer über die ganze Bildschirmbreite geht, ist die Situation nicht 100% eindeutig, wie Philip Tellis in seinem Blog beschreibt.

Der Autor

Hallo, mein Name ist Kirsten Schelper. Ich bin Webdesignerin aus München mit einer Passion für italienischen Kaffee, vegetarische Küche und Fahrradfahren. Ihr findet mich nicht bei Facebook, dafür aber auf Twitter und auf Google+.