Bildschirmgröße Entwicklertools

[Auge]

Hallo

folgende Seite http://screensiz.es/ zeigt alle Höhen und Breiten an. Nehme ich beispielsweise Apple iPhone 6+ Link: http://screensiz.es/iphone-6-2 , bekomme ich eine Höhe von: 1920px und eine Breite von: 1080px.

Das ist die physikalische Auflösung des Displays.

Chrome sagt aber was anderes dazu und zwar 414x736px.

Das ist die Auflösung der Darstellung. Dabei wird ein Pixel in der Darstellung auf mehrere Pixel des Displays verteilt. So werden beispielsweise Schriften schärfer dargestellt und besser lesbar. Bei Apple nennt sich die Technik Retina. Zumindest der Begriff sollte wohl bekannt sein.

Für die Größenangaben in CSS ist diese Auflösung relevant. Dabei solltest du aber beachten, dass es unzählige mögliche Auflösungen gibt und es mit neuen Gerätetypen gewiss nicht weniger werden. Gib Größen für Schriften und generelle Dimensionen von Elementen in relativen Einheiten an. Dadurch wird es zwar kleinere Abweichungen in der Darstellung auf den verschiedenen Geräten geben, das ist aber kein Problem, weil der Benutzer ja zu einem Zeitpunkt ein Gerät benutzt, wo die Seite aussieht, wie sie halt aussieht.

Muss der Wert von screensiz.es noch umgerechnet werden?

Das wird nicht funktionieren, weil verschiedene Hersteller in verschiedenen Geräten aus Displays mit gleicher physikalischer Auflösung unterschiedliche Auflösungen generieren.

Tschö, Auge