Responsive Webseiten für Smartphones: Physikalische vs. logische Auflösung

Link auf Original-Artikel kann gerne geteilt werden !

Physikalische vs. logische Auflösung
Physikalische vs. logische Auflösung

Webseiten sollten sich heutzutage aus Nutzer- und SEO-Sicht an die Bildschirmgröße und –auflösung der verwendeten Geräte anpassen (sog. Responsive Webseiten / Responsive Webdesign, siehe älterer Artikel).

Während „alte“ Geräte, z.B. das Samsung Galaxy S1 noch relativ niedrige Auflösungen hatten (480 x 800 Pixel), haben moderne Geräte viel höhere Auflösungen bei ähnlicher Display-Größe, was eine höhere Pixeldichte ergibt. Beispielsweise haben aktuelle Geräte wie das Samsung Galaxy Note 8 eine Auflösung von 1440 x 2960 Pixel, mehr als der eine oder andere Laptop bzw. Desktop-Monitor.

Wie kann nun ein Webentwickler mit diesen unterschiedlichen Auflösungen umgehen, um optimal benutzbare Seiten bereit zu stellen ?

Die Lösung für Web-Entwickler ist, dass über CSS-Media-Queries nicht die physikalische, sondern eine normierte logische Auflösung (CSS-Auflösung) abgefragt werden kann (siehe auch W3Schools Beispiel 1 und W3Schools Beispiel 2).

Über Media-Queries werden für unterschiedliche logische Auflösungen unterschiedliche CSS-Stylesheets geladen (im Beispiel unten für unter 480 Pixel, zwischen 480 und 800 Pixel und über 800 Pixel) . Man kann dies auch in einem Stylesheet machen und dort die Media Queries unterbringen … ist Geschmackssache.

Beispiel Media Queries
Beispiel Media Queries

Eine Übersicht über physikalische und logische Auflösungen gebräuchlicher Geräte gibt es beispielsweise bei mydevice.io (siehe unten). Dort kann man auch die eigenen Geräte-Eigenschaften abfragen.

Das ist der Basis-Mechanismus, der i.d.R. auch hinter professionellen responsiven Templates steckt, so dass man responsive Webseiten entwickeln kann, die für alle Auflösungen und Formfaktoren sowie für alte Geräte als auch für aktuelle Geräte, wie das Samsung Galaxy Note 8, funktionieren.

Physikalische und logische Auflösungen bei mydevice.io
Physikalische und logische Auflösungen bei mydevice.io

Oliver Höß

Link auf Original-Artikel kann gerne geteilt werden !


Um keine News mehr zu verpassen, am Besten dem Blog per Mail folgen (siehe unten) oder den monatlichen Newsletter abonnieren.


P.S.: Weitere spannende IT-Events finden Sie auf der Event-Übersicht

Gib deine E-Mail-Adresse ein, um diesem Blog zu folgen und per E-Mail Benachrichtigungen über neue Beiträge zu erhalten.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s