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

Link auf Original-Artikel kann gerne geteilt werden !

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.

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.