breakpoints und landscape – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self breakpoints und landscape Sat, 12 Sep 20 12:31:27 Z https://forum.selfhtml.org/self/2020/sep/12/breakpoints-und-landscape/1775535#m1775535 https://forum.selfhtml.org/self/2020/sep/12/breakpoints-und-landscape/1775535#m1775535 <p>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:</p> <p>Falls ich im CSS folgenden Breakpoint setze:</p> <p>@media (min-width: 534px) {...}</p> <p>wie verhält sich dann ein Smartphone mit einer Auflösung von 320x534 (die sich so ja auf den Portrait-Modus bezieht)?</p> <p>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)?</p> <p>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.</p> <p>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.</p> breakpoints und landscape Sat, 12 Sep 20 13:43:44 Z https://forum.selfhtml.org/self/2020/sep/12/breakpoints-und-landscape/1775539#m1775539 https://forum.selfhtml.org/self/2020/sep/12/breakpoints-und-landscape/1775539#m1775539 <p>Hallo michaah,</p> <p>ich müsste es ausprobieren um sicher zu sein, aber ich würde eigentlich davon ausgehen wollen, dass (A) die richtige Lösung ist.</p> <p>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.</p> <p>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 <a href="https://wiki.selfhtml.org/wiki/JavaScript/Window/devicePixelRatio" rel="nofollow noopener noreferrer">devicePixelRatio</a> ermitteln.</p> <p>Dass das Smartphone die width nur richtig verarbeitet, wenn Du das <a href="https://wiki.selfhtml.org/wiki/HTML/Kopfdaten/meta#Viewport_einstellen" rel="nofollow noopener noreferrer">Viewport-Meta</a> verwendest, weißt Du bestimmt. Ich erwähne es nur zur Sicherheit.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> breakpoints und landscape Sat, 12 Sep 20 14:19:18 Z https://forum.selfhtml.org/self/2020/sep/12/breakpoints-und-landscape/1775542#m1775542 https://forum.selfhtml.org/self/2020/sep/12/breakpoints-und-landscape/1775542#m1775542 <blockquote> <p>Hallo michaah,</p> <p>ich müsste es ausprobieren um sicher zu sein, aber ich würde eigentlich davon ausgehen wollen, dass (A) die richtige Lösung ist.</p> </blockquote> <p>Testen werde ich auch. Aber etwas Orientierung wie es wohl funktionieren sollte ist eben hilfreich. Danke dafür.</p> <blockquote> <p>Für einen gewissen Wert von "richtig". Sicherlich waren die 534px nur ein wild gewähltes Beispiel</p> </blockquote> <p>Im Prinzip ja.</p> <blockquote> <p>... Das ist das so genannte "CSS Pixel". ...</p> </blockquote> <p>Weia, da steht mir noch etwas bevor ...</p> <blockquote> <p>Dass das Smartphone die width nur richtig verarbeitet, wenn Du das <a href="https://wiki.selfhtml.org/wiki/HTML/Kopfdaten/meta#Viewport_einstellen" rel="nofollow noopener noreferrer">Viewport-Meta</a> verwendest, weißt Du bestimmt. Ich erwähne es nur zur Sicherheit.</p> </blockquote> <p>Das war klar, danke dennoch.</p>