Grundverständnis reponsives design

[eiket38296324]

Hi zusammen,

ich habe ein reponsives design erstellt mit mehreren BreakPoints.

320 (Auflösung 320x400)

660 (Auflösung 660x480)

960 (Auflösung 960x500)

1200 (Auflösung 1200x500)

Ich gehe nun davon aus, dass wenn ich die Seite auf einem Iphone SE lade, welches die Auflösung von 1136x640 Pixel hat, folgendes passiert:

a) Öffnen der Seite im Hochformat. Es wird die Webseite mit 320 Pixel Auflösung angezeigt, da die Version mit 660 Pixel für das iPhone SE zu breit ist.

--- In der Praxis wird aber die Version mit 660 Pixel angezeigt.---

b) Öffnen der Seite im Querformat. Es wird die Webseite mit 960 Pixel angezeigt, da nun 1136 Pixel zur Verfügung stehen.

--- aber auch hier wird die Version mit 660 Pixel angezeigt. ---

Kann mir jemand auf die Sprünge helfen?

ET

[Günter Heißenbüttel]

Der Grund ist simpel: Browser rechnen nicht mit der physikalischen Auflösung eines Displays, sondern mit der sog. "Logischen Auflösung". Dein iPhone SE hat eine logische Auflösung von 320 x 568 px.

Siehe etwa hier: http://iosres.com

[eiket38296324]

gibt es für Monitore auch eine derartige Umrechnung?

[Günter Heißenbüttel]

Nein, das betrifft "mobile browsers".

[pets]

was meinst du mit "auf die sprünge helfen"?

du musst die device breakpoints statt der physical res. nehmen.

ich nutze eine kombi aus responsive layout und fixed layout und hab zb folgende breakpoints auf meiner musterseite eingerichtet,

die momentan auf meinem iphone 7plus, auf einem1440px macbook 12" retina und auf meinem 27" imac desktop ganz passabel funktionieren:

320px, 480px, 640px, 960px, 1136px, 1440px (und evtl. noch 1920px)

ob das so korrekt ist, konnte ich weder bei google noch hier finden, jeder sagt was anderes oder niemand will die perfekten breakpoints preissgeben.

ich probiere es ständig aus, also breakpoint machen, online uploaden, auf verschiedenen geräten ansehen, breakpoint ändern, wieder uploaden, usw...

mache das seit ca 1 woche

[Günter Heißenbüttel]

Peter, so langsam müsstest du es wissen :

"Die perfekten Breakpoint" kann niemand "preisgeben", weil es sie nicht gibt!

Eine Orientierung an diversen Geräten ist sicherlich nicht der Weisheit letzter Schluss. An welchen Geräten willst du dich orientieren? An 2o verschiedenen? An 100? An 100? Oder an mehreren 10000, wie sie inzwischen auf dem Mark zu finden sind?

Erstelle das Layout für den größten Breakpoint und prüfe mittels Scrubber, ab wo das Layout nicht mehr stimmt. Dort setze den nächsten Breakpoint. Geräte sollten einfach nicht interessieren. Das ist m.E. der falsche Weg.

[pets]

"Peter, so langsam müsstest du es wissen"

> ja, du hast recht ich weiss, liegt an meiner vergesslichkeit.

"Die perfekten Breakpoint" kann niemand "preisgeben", weil es sie nicht gibt!"

ich kann dieser aussage zu 100% zustimmen!

[Günter Heißenbüttel · Accepted solution]

Um es mal so zu sagen: Jede Seite braucht unterschiedliche Breakpoints, weil mit hoher Sicherheit unterschiedliche Elemente unterschiedlicher Größe und Skalierungseinstellungen zu finden sind.

Gleiche Breakpoints sind nur dann "perfekt", wenn die Seiten über ein gleichartiges Layout verfügen.