Phone Screen Dimensions for Popular Models

In der heutigen Welt gibt es viele Geräte, aus denen die Menschen wählen können, und es kann entmutigend sein, wenn Sie versuchen, zu setzen und bauen für die beste Erfahrung auf allen Geräten. Bei der Gestaltung von Websites und mobilen Geräten ist es jedoch wichtig, die gängigsten Handy-Bildschirmabmessungen und Auflösungen zu kennen, damit Sie Ihr Design an den Bildschirm des Betrachters anpassen können. Eine optimierte, responsive Website erleichtert den Nutzerfluss und erfreut letztendlich Ihr Publikum.

Phone Screen Dimensions vs Viewing Area

Beim Kauf eines Geräts werden oft sowohl die Bildschirmgröße als auch die Auflösung in den Spezifikationen angegeben. Die Bildschirmempfindlichkeit ist das Maß des Bildschirms in der Diagonale in Zoll. Dies ist nicht zu verwechseln mit der Auflösung, die die Anzahl der Pixel auf dem Bildschirm angibt, die oft in Form von Breite in Höhe angezeigt wird (z. B. 1024×768). Da Geräte mit der gleichen Bildschirmgröße sehr unterschiedliche Auflösungen haben können, verwenden Entwickler Anzeigefenster, wenn sie benutzerfreundliche mobile Seiten erstellen. Ansichtsfenster haben eine kleinere Version der Auflösung, was eine einheitlichere Darstellung von Webseiten auf verschiedenen Geräten ermöglicht. Viewports sind oft standardisierter und haben eine geringere Auflösung als die Auflösung.

Obwohl Desktop- und Laptop-Monitore horizontal (höher) sind, können viele mobile Geräte gedreht werden, um Websites in horizontaler und vertikaler Ausrichtung (höher als die Breite) anzuzeigen. Das bedeutet, dass Designer und Entwickler diese Unterschiede bei der Gestaltung berücksichtigen müssen. Während Desktop- und Laptop-Monitore horizontal (höher) sind, können viele mobile Geräte gedreht werden, um Websites in horizontaler und vertikaler Ausrichtung (höher als in der Breite) anzuzeigen. Das bedeutet, dass Designer und Entwickler diese Unterschiede bei der Gestaltung berücksichtigen müssen.

Brauchen Sie Hilfe, um festzustellen, ob Ihre Website responsive ist? Nutzen Sie unser kostenloses responsive viewport tool.

Codierung für verschiedene Telefon-Bildschirmabmessungen

Es wäre für Unternehmen fast unmöglich, jedes Gerät einzeln zu entwerfen. Stattdessen gruppieren Entwickler responsive Projekte oft:

Gruppieren Sie die Stile nach den gängigsten Größen für Telefone, Tablets und Desktops. In diesem Fall wird alles, was größer als 7 Zoll ist, typischerweise mit einer Desktop-Auflösung angezeigt oder… Verwenden Sie Haltepunkte (definiert durch die Breite der Pixel, die die Anzeige entsprechend der Bildschirmgröße anpasst), je nach Design und Standort. Manchmal kann der Entwickler beide Methoden kombinieren, wenn er es für nötig hält. Es wird empfohlen, mit der Gruppierung der typischen Gerätegrößen zu beginnen.

Wenn Sie ein Entwickler sind und die Stile erstellen möchten, die für die Arbeit mit mobilem oder responsivem Stil benötigt werden, haben wir unten ein Fragment von CSS eingefügt, das Ihnen helfen kann. Es ist wichtig zu beachten, dass diese Haltepunkte nicht für alle Websites feststehen und nur als Leitfaden für den Einstieg verwendet werden sollten:

Beispiele:

media and (Maximum width: 991 pixels) { ** "The beginning of great styles of pills}media and (maximum width: 767 pixels) { ** The beginning of medium styles of pills}screen @media and (maximum width: 479px) { ** "The beginning of phone styles}

Was sind die gängigsten Bildschirmabmessungen?

Da wir wissen, dass es wichtig ist, verschiedene Geräte bei der Gestaltung von Websites zu berücksichtigen, haben wir eine Liste der modernsten Geräte mit den entsprechenden Pixelgrößen und Anzeigefenstern zusammengestellt, die unten angegeben ist. Dies ist eine verkürzte Liste, eine umfangreichere Liste mit Pixeldichte, physikalischen und CSS-Auflösungen (Pixel pro Quadratzoll, ‚ppi‘) finden Sie hier.