Viewport-Grösse vs. Bildschirmauflösung

Zwei Begriffe, die oft verwechselt werden – aber für Webdesign ist nur einer davon wirklich relevant. Diese Seite zeigt live, wie stark sich Viewport und Bildschirmauflösung unterscheiden können.

---

Ändere die Fenstergrösse deines Browsers – der Viewport-Wert reagiert sofort, die Bildschirmauflösung bleibt gleich. Genau das ist der Kernpunkt dieser Lektion.

---

Viewport vs. Bildschirmauflösung

• ViewportDer sichtbare Bereich im Browserfenster (in Pixeln). Bestimmt, wie Inhalte dargestellt und gescrollt werden.
• BildschirmauflösungDie gesamte Pixelanzahl des physischen Displays – unabhängig davon, wie gross das Browserfenster gerade ist.

Der Viewport ist der Wert, mit dem CSS tatsächlich arbeitet – Media Queries reagieren auf ihn, nicht auf die Bildschirmauflösung.

---

Sind Viewport und Bildschirmauflösung gleich?

• Desktop/Laptop: meist ähnlich, sofern der Browser im Vollbild läuft.
• Mobile Geräte: oft unterschiedlich. Browser skalieren Seiten (z. B. „Overview Mode“), damit Desktop-Layouts nicht winzig klein dargestellt werden. Der Viewport kann dadurch breiter sein als der tatsächliche Bildschirm – z. B. ein 980px-Viewport auf einem 320px breiten Screen.

Erst der Viewport Meta-Tag (width=device-width) sorgt dafür, dass der Viewport der tatsächlichen Gerätebreite entspricht, statt auf diese künstliche Desktop-Breite skaliert zu werden.

---

Wichtige Konsequenz für Webdesign

Die Bildschirmauflösung ist kein verlässlicher Wert für Webdesign-Entscheidungen. Entscheidend ist ausschliesslich der Viewport – nur er bestimmt, wie viel Platz einer Website tatsächlich zur Verfügung steht.

Praxis: Viele Nutzer:innen verwenden den Browser nicht im Vollbild – der tatsächliche Viewport ist dann kleiner als der Monitor selbst. Sinnvolle Breakpoints orientieren sich deshalb am Layout, nicht an bestimmten Geräte- oder Bildschirmgrössen – häufig liegen sie irgendwo um 1000px und 690px, wie in der Media-Queries-Lektion beschrieben.

---

„Screen Size" – Marketing vs. Realität

Hersteller werben gerne mit immer höheren Auflösungen – die physische Grösse eines Displays bleibt dabei aber meist ähnlich. Was tatsächlich steigt, ist die Pixeldichte (PPI, „Pixels per Inch“): mehr Pixel auf derselben Fläche, nicht eine grössere Fläche.

Für CSS ist das die devicePixelRatio aus dem Demo oben – sie beschreibt, wie viele physische Pixel ein einzelner CSS-Pixel tatsächlich belegt (z. B. 2 bei den meisten Retina-Displays).

---

Live auslesen mit JavaScript

• window.innerWidth / innerHeightViewport-Grösse in CSS-Pixeln
• window.screen.width / heightBildschirmauflösung des gesamten Displays
• window.devicePixelRatioVerhältnis physischer Pixel zu CSS-Pixeln

function updateSizes() {
  document.getElementById('viewport-size').textContent =
    `${window.innerWidth} × ${window.innerHeight}px`;

  document.getElementById('screen-size').textContent =
    `${window.screen.width} × ${window.screen.height}px`;

  document.getElementById('dpr-size').textContent =
    window.devicePixelRatio;
}

window.addEventListener('resize', updateSizes);
window.addEventListener('load', updateSizes);

Hinweis: Das resize-Event feuert nur bei Änderungen der Fenstergrösse (Viewport), nicht der Bildschirmauflösung – die ändert sich zur Laufzeit ohnehin praktisch nie.

---

Kurz gesagt

• Für Layout und Responsive Design zählt der Viewport, nicht die Bildschirmauflösung.
• Auf Mobilgeräten können Viewport und Bildschirmauflösung deutlich auseinanderliegen.
• Der Viewport Meta-Tag sorgt dafür, dass der Viewport der Gerätebreite entspricht.
• Breakpoints gehören ans Layout, nicht an feste Geräte- oder Bildschirmgrössen.
• Höhere „Auflösung“ bedeutet meist mehr Pixeldichte (PPI), nicht mehr Platz.

---