nicht angemeldet
Du darfst hier nicht denken, dass CSS-Pixel und physikalische Pixel dasselbe wären. Mein 4er iPhone hat eine Größe von 320px × 480px (das sind CSS-Pixel), aber (da Retina-Display) in der Breite wie in der Höhe jeweils doppelt so viele physikalische Pixel (was für CSS irrelevant ist).
o.k., danke LLAP, das hab ich inzwischen auch gelernt... das sony xperia hat eine dpr von 3, also ein 'altes' css-pixel wird theoretisch mit 3 pyhsischen pixeln dargestellt, d.h. es würde mit 1080 px in der breite ein bild von 360 'klassischen' pixeln über die volle screen-breite dargestellt... wozu ist ist dann die höhere bildschirmauflösung eigentlich gut? nur zur textdarstellung?
in wirklichkeit verhalten sich die dinge etwas anders: wenn ich ein test-jpg von 360 x 360 px hochlade, wird dieses auf meinem xperia NICHT über die volle breite dargestellt, sondern in etwa auf einem drittel der breite, allerdings - unlogischerweise - nicht auf extakt einem drittel: es nimmt etwa 23 mm ein (zentriert), während die freien bereiche daneben je 20 mm einnehmen... schwenke ich das gerät auf querformat, wird das bild VERGRÖßERT ebenfalls auf etwas mehr als einem drittel der breite dargestellt, nimmt aber jetzt 38 mm ein…
lade ich ein bild hoch, das 72 x 72 pixel groß ist, also auf einem bildschirm mit 72 dpi genau ein inch bzw. 2,54 cm breit sein sollte, dann sehe ich dieses im querformat mit einer größe von ca. 8 mm dargestellt, d.h. etwa einem drittel von einem inch... ergo wird das bild in etwa mit einer dpr von 1:1 gezeigt. im hochformat ist das bild nur noch knapp 5 mm groß... lade ich ein drei mal so großes bild hoch, also 216 x 216 px, dann wird dies im querformat ca. 23 mm breit dargestellt, also mit einer dpr von etwas weniger als 1:3 (denn sonst müsste es 25,4 mm bzw. 1 inch messen)...
lade ich ein bild mit 1080 px kantenmaß hoch, also genau mit der device-pixel-breite des xperia, wird dieses in etwa auf der vollen screenbreite dargestellt (mit einem winzigen rand links, sodass man minimal scrollen kann). das gleiche ergebnis im querformat.
ergo: xperia zumindest hat unterschiedliche dpr-raten im hoch- und im querformat... die generelle meldung etwa von www.devicepixelratio.com, dass mein xperia eine dpr von 3 hätte, ist also falsch, oder?
und m.a.w.: moderne smartphones benutzen durchaus die vorhandenen physischen pixel, um ein bild brillianter darzustellen... man muss also bilder mit deutlich mehr pixeln hochladen, wenn man will, dass diese mit der gleichen physischen größe dargestellt werden, wie auf einem computer-screen mit 72 dpi und einer dpr von 1:1... richtig???
bleibt die frage: was würde die media-query für einen pixel-wert für die breite meines xperia liefern? kämen 360 px, müsste ich trotzdem ein bild von 1080 px breite hochladen, wenn dieses die volle screen-breite einnehmen soll. ein test mit
@media screen and (max-width:360px) {
body {background-color:yellow;}
}
ergibt, dass der body im hochformat gelb gefärbt wird, im querformat aber weiß bleibt... m.a.w.: die media-query liefert das ergebnis, dass der screen <= 360 px breit ist (richtig?)... trotzdem müssen die bilder, die ich hochlade, um den screen in voller breite zu füllen, 1.080 px breit sein die schrift 36 px oder mehr hoch sein... besser also, ich definiere die schriftgröße in einem physischen maß, z.b. mm (egal ob nun die basis-bezugsschrift, um dann "em" zu verwenden, oder jede einzelne...); dann geht nix schief...
die schrift sollte dabei tunlichst nicht die am pc-screen möglichen 12 px groß sein - diese 12-px-schrift ist am händi im hochformat WINZIG -, sondern in etwa 3 mal so groß, also 36 px; das kann mensch noch einigermaßen gut lesen (weil gestochen scharf, obgleich nur ca. 2 mm groß [großbuchstaben])... und weiter sollte der text nun keinesfalls auch noch in 2 spalten geführt werden, sondern nur noch in einer…
und, was sagen die fachleute zu meinen beobachtungen...? beste jrüße aus baalin! BerlinerTourGuide
ps: an all dem ändert auch <meta name="viewport" content="width=device-width, initial-scale=1.0"> nichts...
Julius
Matthias Scharwies
Gunnar Bittersmann
Matthias Apsel
Tabellenkalk