In der heutigen Welt gibt es eine Vielzahl von Geräten zur Auswahl und es kann entmutigend sein, zu versuchen, die besten Erlebnisse auf allen Geräten unterzubringen und aufzubauen. Es ist jedoch wichtig, bei der Gestaltung von Web-und mobilen Websites über die beliebtesten Bildschirmgrößen und-auflösungen auf dem Laufenden zu bleiben. Eine Website, die optimiert und reaktionsschnell ist, sorgt für einen einfacheren Benutzerfluss und letztendlich für ein angenehmes Erlebnis für Ihr Publikum.,
Bildschirmgröße, Auflösung und Ansichtsfenster: Was bedeutet das alles?
Wenn Sie ein Gerät kaufen, sehen Sie häufig sowohl die Bildschirmgröße als auch die Auflösung in den Spezifikationen. Die Bildschirmgröße ist die physikalische Messung diagonal des Bildschirms in Zoll. Dies ist nicht zu verwechseln mit der Auflösung, bei der es sich um die Anzahl der Pixel auf dem Bildschirm handelt, die häufig als Breite nach Höhe angezeigt werden (dh 1024×768). Da Geräte mit der gleichen Bildschirmgröße sehr unterschiedliche Auflösungen haben können, verwenden Entwickler Ansichtsfenster, wenn sie mobile freundliche Seiten erstellen., Ansichtsfenster sind verkleinerte Versionen von Auflösungen, mit denen Websites konsistenter auf verschiedenen Geräten angezeigt werden können. Ansichtsfenster sind oft standardisierter und kleiner als Auflösungsgrößen.
Während Desktop-und Laptop-Displays im Querformat (breiter als hoch) angezeigt werden, können viele mobile Geräte gedreht werden, um Websites im Quer-und Hochformat (größer als breit) anzuzeigen. Dies bedeutet, dass Designer und Entwickler für diese Unterschiede entwerfen müssen.
Benötigen Sie Hilfe bei der Bestimmung, ob Ihre Website reagiert? Verwenden Sie unser kostenloses Design-Tool Responsive Design Checker.,
Während Desktop-und Laptop-Displays im Querformat (breiter als hoch) angezeigt werden, können viele mobile Geräte gedreht werden, um Websites im Quer-und Hochformat (größer als breit) anzuzeigen. Dies bedeutet, dass Designer und Entwickler für diese Unterschiede entwerfen müssen.
Responsive Styling
Es wäre für Unternehmen fast unmöglich, für jedes einzelne Gerät zu entwerfen. Stattdessen gruppieren Entwickler beim Programmieren von Responsive Designs häufig:
- das Styling in die typischsten Gerätegrößen für Telefone, Tablets und Desktops., In diesem Fall wird normalerweise alles, was größer als 7 Zoll ist, in Desktop-Auflösung angezeigt oder –
- Verwenden Sie Haltepunkte (definierte Pixelbreiten, die das Layout basierend auf der Bildschirmgröße anpassen), abhängig vom Design und Layout
Manchmal kann ein Entwickler beide Methoden kombinieren, wenn er dies für erforderlich hält. Wir empfehlen, zunächst typische Gerätegrößen zu gruppieren.
Wenn Sie Entwickler sind und die erforderlichen Stile für das mobile oder responsive Styling generieren möchten, haben wir unten einen CSS-Ausschnitt eingefügt, der hilfreich sein könnte.,d nur als Leitfaden verwendet werden, um loszulegen:
/* start of desktop styles */
@media screen und (max-width: 991px) {
/* Start von großen tablet styles */
}
@media screen und (max-width: 767px) {
/* Start von medium tablet styles */
}
@media bildschirm und (max-width: 479px) {
/* Start of phone styles */
}
Die beliebtesten Bildschirmauflösungen
Da wir wissen, dass es wichtig ist, die vielen verschiedenen Geräte beim Entwerfen von Websites unterzubringen, haben wir eine Liste der aktuellsten Geräte mit ihren jeweiligen Pixelgrößen und Ansichtsfenstern unten zusammengestellt., Wir haben diese Informationen auch in ein praktisches herunterladbares PDF eingefügt.,560
Got anymore tips or suggestions on how to handle different screen sizes and resolutions?, Teilen Sie mit uns auf Facebook!