Auge: Darstellung auf mobilen Geräten

Beitrag lesen

problematische Seite

Hallo

Es hat mit @media screen and (min-device-width: 480px) and (min-device-height: 320px) funktioniert! Habe die Präfixe bis auf -webkit- nun entfernt! Nein, das mit em wusste ich nicht, hier gibt es einen Converter …

… dessen Existenz du gleich wieder vergessen solltest.

Bei Smartphones ist die Pixeldichte ja höher, sollte ich deswegen bei der Umrechnung etwas beachten?

Für die CSS-Angaben ist die physikalische Auflösung des Displays heutzutage nicht zu gebrauchen. Ein Smartphone-Display kann eine Full-HD-Auflösung haben, aber für die Ausgabe in einem Browser eine Auflösung wie die von dir genannte von 740x360 Pixeln aufweisen. Du kannst ja mal die Suchmaschine deiner Wahl mit dem Stichworten „CSS-Pixel“ und „Device-Pixel“ füttern und dich verwirren lassen. 😀

Noch eine Frage: Es gibt viele Tabellen, wo die Auflösungen etc. der verschiedenen mobilen Geräte aufgelistet werden, aber benutze ich dann auch min-device-width? Denn bei meinem Galaxy S8 ist zum Beispiel eine Ratio von 740x360 angegeben, aber wenn ich bei What’s my viewport size? schaue, dann ändert sich der tatsächliche Viewport natürlich je nach Browser. Gibt es irgendwo eine Tabelle, die zur entsprechenden device-width auch eine Mindestbreite bzw. -höhe angibt? Habe nichts gefunden bisher.

Eine solche Auflistung taugt nicht für einen praktischen Gebrauch. Es gibt noch und nöcher Geräte mit verschiedenen Auflösungen. Morgen™️ kommen, wie gestern auch, neue Geräte mit wieder anderen Auflösungen auf den Markt. Das kannst du überhaupt nicht unterstützen. Deshalb kommt hier auch immer wieder der Rat, ddie Dimensionen des Layouts — vorwiegend geht es dabei um die Breiten — am Verhältnis zu der in den Browsern festgelegten Schriftgröße festzumachen. Damit machst du dich von der Abhängigkeit zu genauen Pixelangaben frei und hast bei verschiedenen Geräten dennoch etwa gleiche Verhältnisse (Aufteilung zwischen Elementbreiten, Zeilenlängen, etc.). Unterschiede gibt es, aber die sind kein Beinbruch (auch wenn immer wieder anderes behauptet wird). Diese Unterschiede gibt es schließlich auch zwischen den Ansichten auf irgendeinem Smartphone und einem anderen mit anderer Viewportgröße, auf Tablets verschiedener Größen und Browserfenstern auf Desktops, die bei einem Nutzer im Vollbild und bei einem anderen in einem kleineren Fenster betrieben werden.

Tschö, Auge

--
Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
Toller Dampf voraus von Terry Pratchett