Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet...

[Matthias Apsel]

Hallo salzberg,

bringt das wohl nicht nur mit sich. dass das einzige, was man machen muss, ist, px durch entsprechende em-Werte austauschen...

Setze keine gerätespezifischen Breakpoints sondern setze sie abhängig vom Inhalt, zum Beispiel dann, wenn deine Überschrift nicht mehr einzeilig auf die Seite passt. Bzw. mobile first - wenn der Bildschirm genügend Platz für eine andere Gesatltung bietet.

Ich verstehe auch diese Grafik in diesem Eintrag nicht. Was soll denn damit ausgesagt werden?

Dass es sehr sehr viele Abmessungen von Bildschirmen gibt.

Was sind realistische Werte?

Überlege dir, wie breit ein Text sein sollte, damit man ihn gut erfassen kann. Als negativ-Beispiel kann die Wikipedia auf breiten Bildschirmen gelten.

Wieviel Breakpoints sollte man setzen?

Im Idealfall keinen, weil du eine Gestaltung verwendest, die ohne auskommt. Sonst eher wenige.

Wie kann man das ganze ausprobieren, wenn das über die Größenänderung des Browserfensters nicht mehr funktioniert?

Wenn du dich am Inhalt und nicht an Geräteabmessungen orientierst, funktioniert es genau so.

Warum gibt es dann diese Desktop-Browser Responsive-Ansichten, wenn sie offenbar in keiner Weise zuverlässig sind? (am Mac in Safari wunderschön angelegt, mit einer große Auswahl an aktuellen (Apple-) Geräten... für was das ganze dann?)

Orientiere dich nicht an den Abmessungen irgendwelcher Geräte.

Jetzt aber noch eine ganz praktische Frage: In den Beiträgen wird immer wieder erwähnt, dass es – offenbar auch bei Mobile-First – irgendwo eine Abfrage (oder Angabe?) für die Anzeige-Breite für dieses Anzeigendesign bräuchte.

Nein, mobile-first bedeutet, dass diese dein "default"-Darstellung ist.

Aber wo soll das denn dann stehen, bzw, wo, im style-sheet steht dann dass, was für alle Anzeigekombinationen gilt?

Am ANfang, ohne MQ.

css @media (min-width: 1024px){

.style-logo { float: left; }

.style-nav { float: right; } }

Float ist für das Umfließen von etwa Grafiken durch Text gedacht, nicht für Gestaltung, dafür gibt es flexbox oder grid. Aber das wäre vielleicht der nächste Schritt.

Bis demnächst
Matthias