Bildschirmauflösung prüfen
Zeigt den Viewport deines Browsers live an, während du die Fenstergröße änderst, dazu Bildschirmauflösung, Device Pixel Ratio, Ausrichtung und Farbtiefe.
Viewport und Bildschirmauflösung sind nicht dasselbe
Die Bildschirmauflösung ist die Gesamtgröße des Displays (zum Beispiel 1920×1080), der Viewport dagegen nur der Bereich, in dem der Browser die Seite tatsächlich darstellt: Adressleiste, Tabs und Systemleisten gehören nicht dazu, und er wird kleiner, sobald das Fenster nicht im Vollbild ist. Bei responsiven Websites richten sich die CSS-Media-Queries nach dem Viewport, nicht nach dem Bildschirm, und deshalb zeigt ihn diese Seite live an, während du die Fenstergröße änderst. Diese Zahl entscheidet, ob deine Besucher das Desktop- oder das mobile Layout sehen.
Was bedeutet Device Pixel Ratio?
Auf Displays mit hoher Pixeldichte (Retina-Bildschirme, die meisten modernen Smartphones) wird jedes CSS-Pixel mit mehreren physischen Pixeln dargestellt: Eine Pixel Ratio von 2 bedeutet 4 echte Pixel für jedes logische. Deshalb kann ein Handy mit einem 1170×2532-Panel einen Viewport von knapp 390 Pixeln Breite melden. Der Wert ist wichtig, wenn du Bilder fürs Web vorbereitest: Damit ein Bild, das mit 300 CSS-Pixeln Breite angezeigt wird, auf einem Display mit Ratio 2 scharf aussieht, sollte es mindestens 600 echte Pixel breit sein.