michaah: breakpoints und landscape

Ich skizziere mir eben das gewünschte Aussehen meiner Website in Abhängigkeit von Breakpoints. Dabei habe ich eine Frage zum Landscape Modus von smartphones:

Falls ich im CSS folgenden Breakpoint setze:

@media (min-width: 534px) {...}

wie verhält sich dann ein Smartphone mit einer Auflösung von 320x534 (die sich so ja auf den Portrait-Modus bezieht)?

A) Der Browser des Smartphones wird im landscape-modus diese Declaration auswerten (weil er schlau genug ist zu erkennen dass seine Auflösung in diesem Modus eben 534x320 ist)?

B) Der Browser wertet das nicht aus? Ich muß all dies in eine eigene Section @media only screen and (orientation: landscape) {...} packen. Auch wenn ich vorhabe dass es im Landscapemodus genauso aussehen soll wie auf einem kleinen Tablett und ich exakt die gleichen Deklarationen verwenden will.

Lassen wir bitte an diese Stelle mal dahingestellt, ob das mich oder dich dann tatsächlich überzeugen würde, es geht mir hier nur darum die technische Seite zu verstehen.

  1. Hallo michaah,

    ich müsste es ausprobieren um sicher zu sein, aber ich würde eigentlich davon ausgehen wollen, dass (A) die richtige Lösung ist.

    Für einen gewissen Wert von "richtig". Sicherlich waren die 534px nur ein wild gewähltes Beispiel - aber Dir ist sicherlich klar, dass es ein breites Spektrum von Smartphone-Auflösungen gibt und du solltest deine Breaks nicht auf Pixeln basieren, sondern auf em. Das bezieht die gewählte Schriftgröße mit ein, was wichtig ist, wenn der Smartphone-User den Textzoom verwendet.

    Du solltest auch daran denken, dass HiRes Displays mit bspw. 1000x3000 Pixeln, aber 6 Zoll Diagonale, dem Browser gegenüber nicht mit dieser Auflösung präsentiert werden, sonden mit einem Bruchteil davon. Das ist das so genannte "CSS Pixel". Das Verhältnis zwischen CSS-Pixeln und Display-Pixeln kannst Du mit JavaScript über die Eigenschaft devicePixelRatio ermitteln.

    Dass das Smartphone die width nur richtig verarbeitet, wenn Du das Viewport-Meta verwendest, weißt Du bestimmt. Ich erwähne es nur zur Sicherheit.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. Hallo michaah,

      ich müsste es ausprobieren um sicher zu sein, aber ich würde eigentlich davon ausgehen wollen, dass (A) die richtige Lösung ist.

      Testen werde ich auch. Aber etwas Orientierung wie es wohl funktionieren sollte ist eben hilfreich. Danke dafür.

      Für einen gewissen Wert von "richtig". Sicherlich waren die 534px nur ein wild gewähltes Beispiel

      Im Prinzip ja.

      ... Das ist das so genannte "CSS Pixel". ...

      Weia, da steht mir noch etwas bevor ...

      Dass das Smartphone die width nur richtig verarbeitet, wenn Du das Viewport-Meta verwendest, weißt Du bestimmt. Ich erwähne es nur zur Sicherheit.

      Das war klar, danke dennoch.