Media Queries für kleine Smartphones und Browser-Tools

[Martinus33]

Hallo,
beim Umbau meiner Website mache ich jetzt die MQ und bin gerade beim MQ für die Smartphones Smartphones.

Es heißt, die mobile-Ansicht solle zumindest für Smartphones bis runter auf 320px gut aussehen. Im FF gibt es ein Tool, das über ein Icon aus zwei kleinen Rechtecken aufgerufen wird. Dort kann man dann eine Site testweise auf allen möglichen Smartphone-Viewports ansehen und dort ist das IPhone 5 SE 10.3.1 mit angegebenen 320px offenbar das kleinste.

Diese 320px kommen mir aber groß vor. Mein altes 5-Zoll-Handy ist klein, o.k., aber wenn ich es im FF vor die IPhone5-Ansicht hinhalte, passt es da locker rein und hat noch deutlich Platz links und rechts.
Inwieweit ist eine solche Ansicht in Browser-Tools realistisch, warum erscheinen die Smartphone-Viewports alle etwas größer als in natura?

Letztlich wird man das auf echten Smartphones nochmal alles testen, aber zum Erstellen braucht es erst mal eine verlässliche Basis.

Wenn die mobile-Ansicht der Site auf den verdächtig großen 320px des IPhone 5 im FF gut ist, ist sie dann auch real auf dem IPHone 5 gut, wo alles nochmal kleiner ist?

 

[kim88]

Ein Pixel ist am Ende einfach einen Punkt. Da Smartphones oft hochauflösender sind, als Desktop Monitore sind die Punkte auf Smartphones viel kleiner - und auf Desktop Monitore eben grösser.

Sprich 320px breite sind je nach Display unterschiedlich breit - wenn das Untersuchen Tool 320px anzeigt passt das schon.

 

[Marco01_809]

Halte das Handy näher an dein Gesicht, dann ist der Ausschnitt gleich groß

Lies dich mal ein zum Thema CSS vs device pixels.

Auf Desktops mit 100% Skalierung ist 1px in CSS = 1 Pixel deines Monitors. Handys haben aber eine viel höhere Pixeldichte, d.h. ein Bildschirmpixel ist viel kleiner. Darum hat ein Handy weniger CSS pixel als Bildschirmpixel. Du hast also 320 "virtuelle Pixel" Platz. Und genau diesen Platz zeigt das Viewport Tool dir an. Aber es skaliert das Bild dann nicht noch auf die genaue Größe des Geräts. Kann Firefox auch nicht weil es gar nicht weiß wie groß dein Monitor ist (24", 27", etc.).

 

[Midnight Sun]

Ich werfe einfach mal mobil-First und Responsive Design in den Raum.

Damit fängt man beim kleinsmöglichen Nenner an, also den mobilen Endgeräten und baut darauf die Website auf.
Mit dem Media Queries sprichst du dann die nächstgrößere Auflösung an usw.

Wenn du eine vorhandene Seite an mobile Endgeräte anpassen möchtest, musst du das Layout reduzieren (auf ein Minimum) und zwar soweit das alles wirklich absolut notwenige noch funktioneirt.

Generell würde ich dir (kommt zwar auch auf die Seite ansicht an) dazu raten, ein fexibles Layout zu nutzen, was sich automatisch an die Auflösungen anpasst.

Oder du stellt, wenn es etwas einfach sein soll, alles auf zB Bootstrap um.

...ist etwas kompliziert geschrieben, war ein langer Tag! 🫣

 

[Martinus33]

Ein Pixel ist am Ende einfach einen Punkt. Da Smartphones oft hochauflösender sind, als Desktop Monitore sind die Punkte auf Smartphones viel kleiner - und auf Desktop Monitore eben grösser.

Sprich 320px breite sind je nach Display unterschiedlich breit - wenn das Untersuchen Tool 320px anzeigt passt das schon.

Dann scheint mein billiges Uralt-Handy bereits eine deutlich höhere Auflösung zu haben als mein Monitor.

Im Ergebnis heißt das, wenn ich im FF-Tool ein MQ-Design der Seiten sehe, das mit 320px Breite beim alten IPhone 5 SE "passt", dann passt es auch in real bei den kleinen Smartphones mit 320px, auch wenn sich "verdichtet" dort dann alles kleiner darstellt.

Macht ihr euch Gedanken über noch kleinere Viewports, wenn also knapp unter 320px das Layout schlecht wird? Irgendwann muss doch mal eine Grenze sein, spätestens wenn ein paar wenige Worte noch nebeneinander gelesen werden können müssen.

 

[kim88]

Der Hinweis wurde hier schon gegeben "Mobile First": Im Grunde baut man Layouts so das sie auf kelinen Screens gut aussehen.

Als Beispiel du machst eine Kachel die links und rechts einen Abstand von 25Pixel haben. Das saklierst du dann einfach hoch - im Sinne von auf Tablet Hochformat zeigst du zwei Kacheln nebeneinander statt alle untereinander.

Auf Tablet quer Format zeigst du z.b. drei nebeneinander und auf grossen Screens 4 oder so.

 

[Midnight Sun]

Macht ihr euch Gedanken über noch kleinere Viewports ...

Kurz gesagt: nein!

Ob man das überhaupt noch machen muss und wenn, wie viele Besucher das wären: Kein Plan, da ich keine Statistiken mehr beziehe. Abgesehen von den paar Brocken, die der Provider bezieht.

Vllt. mag @Frank ein paar Daten dazu springen lassen?

 

[Martinus33]

Der Hinweis wurde hier schon gegeben "Mobile First": Im Grunde baut man Layouts so das sie auf kelinen Screens gut aussehen.

Ich baue mehrere bereits bestehende Sites auf reines HTML/CSS um, die alle desktop-first sind. Die großen Strukturelemente wie header, footer , aside, main bleiben auch mobile alle erhalten, da ist eh kein Unterschied insoweit.

Aber auch mobile-first gibt es für "normale" Webseiten mit Text, Bildern usw. eine Minimalgrenzen. Je nach Arbeitsweise und Website mag sich die Frage nicht immer mit der gleichen Relevanz stellen, aber ich habe gelesen, dass die 320px meistens so die Grenze sind, bis wohin es auf jeden Fall gut nutzbar sein sollte.
Wenn jemand ein 10 Jahre altes Exotengerät mit 300px hat, dass nur noch 0,05% besitzen, hat er halt u.U. Pech gehabt, aber der wird diese Erfahrung ohnehin öfter machen.

Da habe ich eine erst ein Jahr alte Diskussion dazu gefunden, mit einer Statistik dazu und das würde die 320 px als Untergrenze bestätigen, selbst wenn man Zooming und Acc.-Überlegungen miteinbezieht:
https://www.reddit.com/r/webdev/comments/1g1if0j/seriously_whats_the_smallest_screen_size_a/?tl=de

Der dortigen Statistik zufolge haben ca. 2% der User noch Geräte mit 320px, kleinere tauchen gar nicht mehr auf, auch nicht mit 0,0..%.

 

[kim88]

Klar sagt man irgendwann scheiss drauf. Dennoch macht es Sinn möglichst nicht in Pixel sondern in Strukturen zu denken.

Eben Beispiel Kachel du definierst nicht "Kachel soll 320px breit sein" - du definierst eben: Kachel soll 100% breit sein und links und rechts einen Abstand von XY haben.

Und auf Tablet mitte 3 Kacheln nebeneinander und mobile alle Kacheln untereinander, etc.

Und schon ist es ziemlich egal ob da jemand 300, 320 oder 340pixel hat.