Bildschirmauflösung-Test

Über das Werkzeug

Die genaue Viewport-Größe, das Gerätepixelverhältnis und die Bildschirmauflösung des Geräts, auf dem Sie testen, sind für responsives Design und die Reproduktion von Fehlern unerlässlich. Dieses Tool meldet diese in Echtzeit und aktualisiert sie, wenn Sie das Gerät drehen oder die Größe ändern. Verwenden Sie es, um zu bestätigen, dass ein Retina-Display Pixel verdoppelt, um den genauen Viewport für einen Screenshot zu erfassen oder um Breakpoints zu debuggen, die sich anders als erwartet verhalten.

Häufige Fragen

Auflösung vs. Viewport – was ist der Unterschied?

Auflösung ist die physische Pixelanzahl des Bildschirms. Viewport ist der CSS-Pixelraum, in den Ihre Seite gerendert wird, der aufgrund der DPR-Skalierung normalerweise kleiner ist.

Was ist das Gerätepixelverhältnis?

Das Verhältnis von physischen Pixeln zu CSS-Pixeln. Ein DPR von 2 bedeutet, dass jedes CSS-Pixel als 2x2-Block gerendert wird – deshalb müssen Retina-Bilder 2x sein.

Warum ändert sich die Breite, wenn ich drehe?

Quer- und Hochformat tauschen die Dimensionen und können unterschiedliche Media Queries auslösen. Testen Sie immer beide Ausrichtungen auf Mobilgeräten.

Welche Breakpoints sollte ich unterstützen?

Modernes responsives Design zielt auf 360, 768, 1024 und 1440 px als Ankerpunkte ab; entwerfen Sie flüssig zwischen ihnen und nicht für bestimmte Geräte.