Screen Size Detector

Wie gross ist mein Browserfenster?
Die Werte unten aktualisieren sich live beim Verändern der Fenstergrösse. Besonders die Viewport-Breite ist beim Entwickeln hilfreich: Bricht ein Layout unschön um, lässt sich hier direkt ablesen, bei welcher Breite das passiert.

---

---

Viewport 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.

• 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.

---

Konsequenz für Webdesign

Die Bildschirmauflösung ist kein verlässlicher Wert für Webdesign-Entscheidungen – entscheidend ist ausschliesslich der Viewport.

• Desktop: Browser läuft oft nicht im Vollbild – der Viewport ist dann kleiner als der Monitor.
• Mobile: Browser skalieren im „Overview Mode“, der Viewport kann dadurch grösser sein als der tatsächliche Screen – z. B. 980px Viewport auf 320px Bildschirm.

Mit dem Viewport Meta-Tag (width=device-width) entspricht der Viewport der tatsächlichen Gerätebreite statt der künstlichen Desktop-Breite.

Sinnvolle Breakpoints orientieren sich deshalb am Layout, nicht an Geräte- oder Bildschirmgrössen – häufig liegen sie irgendwo um 1000px und 690px, wie in der Media-Queries-Lektion beschrieben.

---

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.

---