Schon der Vergleich zwischen Laptop und Smartphone zeigt große Unterschiede - in der Größe (cm), aber auch in der Auflösung (Pixel):
Die Auflösung von Bildschirmen ist über viele Jahre gestiegen, scheint aber inzwischen ein Plateau erreicht zu haben - Smartphones und Laptops haben heute oft schon eine sehr hohe Pixeldichte.
Mit mydevice.io könnt ihr euren aktuellen Browser vermessen. Die dort angezeigten Pixel sind virtuelle CSS-Pixel - nicht die echten, physischen Pixel des Displays:
Der Faktor zwischen “echten” Pixeln und virtuellen CSS-Pixeln heißt Device Pixel Ratio (auch: CSS Pixel Ratio):
Ein Laptop mit 1440 CSS-Pixel auf 2880 echten Pixeln hat eine Device Pixel Ratio von 2
Ein Smartphone mit 360 CSS-Pixel auf 1080 echten Pixeln hat eine Device Pixel Ratio von 3
Der CSS-Standard definiert das CSS-Pixel nicht als physische Bildschirm-Einheit, sondern als Sehwinkel aus einer bestimmten Entfernung:
The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length.
Praktisch bedeutet das: Egal auf welchem Ausgabegerät - ein CSS-Pixel wirkt für Betrachter*innen ungefähr gleich groß, weil Geräte mit höherer Pixeldichte typischerweise auch näher am Auge gehalten werden (Smartphone) und Geräte mit niedrigerer Pixeldichte weiter weg (Smart-TV):
Ohne weitere Angabe rendert ein mobiler Browser eine Webseite nicht in der tatsächlichen Bildschirmbreite des Geräts, sondern in einem virtuellen Layout-Viewport von standardmäßig 980px Breite (Safari iOS; Chrome/Android verhält sich ähnlich) - unabhängig davon, ob das Handy physisch nur 375px breit ist.
Der Browser rendert die Seite also so, als wäre sie auf einem 980px breiten Bildschirm, und zoomt das Ergebnis anschließend so weit heraus, bis alles auf den echten Screen passt. Das Ergebnis: winzige, unlesbare Schrift und eine Seite, die man erst per Pinch-to-Zoom vergrößern muss.
Warum überhaupt ein fixer Default-Wert? Das wirkt zunächst willkürlich, hat aber einen historischen Grund. Als das iPhone 2007 auf den Markt kam, gab es praktisch kein “mobiles Web” - fast alle Webseiten waren für Desktop-Bildschirme mit festen Layouts von grob 980-1024px Breite gebaut. Hätte Apple den Layout-Viewport von Anfang an auf die echte Gerätebreite gesetzt (z. B. 320px beim ersten iPhone), wären diese Desktop-Seiten komplett zerbrochen: mehrspaltige Layouts hätten sich gequetscht, Elemente wären übereinandergefallen.
Die Lösung: Der Browser unterscheidet zwischen zwei Viewports:
Layout-Viewport (980px default): Die Breite, auf der CSS und das Seitenlayout berechnet werden
Visueller Viewport: Der tatsächlich sichtbare Ausschnitt auf dem Display
Die Seite wird also komplett in 980px-Breite berechnet und anschließend verkleinert dargestellt - dadurch zwar winzig, aber wenigstens nicht kaputt, und man kann per Pinch-to-Zoom in einzelne Bereiche hineinzoomen.
Der Grund, warum sich das auf deinem eigenen Handy falsch anfühlt: Du siehst diesen Default-Zustand heute praktisch nie, weil fast jede Webseite bereits den Viewport-Meta-Tag mit width=device-width gesetzt hat. Du bekommst also immer schon das “korrigierte” Verhalten zu sehen.
width=device-width überschreibt die 980px-Annahme: Der Browser nutzt stattdessen die tatsächliche Gerätebreite in CSS-Pixeln als Layout-Viewport-Breite (z. B. 390px bei einem iPhone 14, 412px bei vielen Android-Geräten) - Layout- und visueller Viewport fallen dadurch zusammen
initial-scale=1 legt zusätzlich fest, dass beim ersten Laden ein CSS-Pixel exakt einem Viewport-Pixel entspricht - es wird also weder rein- noch rausgezoomt gestartet
Betrifft das nur Smartphones? Nein - das Verhalten mit dem künstlichen Layout-Viewport betrifft grundsätzlich alle mobilen Browser mit Touchscreen, also auch Tablets (iPad, Android-Tablets). Desktop-Browser kennen dieses Problem gar nicht: Dort ist der Viewport von vornherein identisch mit der echten Fenstergröße, der Meta-Tag hat dort also keine Auswirkung.
CSS-Pixel ≠ physische Pixel: Die 390px bei device-width auf einem iPhone 14 sind nicht dasselbe wie die tatsächliche physische Auflösung des Displays (die liegt viel höher). Der devicePixelRatio (meist 2 oder 3) rechnet das intern um, sodass CSS weiterhin mit handlichen, “logischen” Werten wie 390px arbeiten kann, während der Bildschirm im Hintergrund entsprechend mehr physische Pixel pro CSS-Pixel zeichnet - daher wirken Texte und Bilder auf hochauflösenden Handydisplays trotzdem scharf.
