Ü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:
meta name="viewport" content="width=device-with"
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.
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.
@media screen and (min-width: 1024 px)
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.