inspector(s) pixeldichte, pixelangaben, cm .... Was bekomme ich eigentlich zu sehen? Äquivalenzdarstellungen?

[michaah]

Hallo,

meine (neu überarbeitete) Website (mit responsive design) ist in der Smartphone-Version fertig (Naja, Fehlerkontrolle für Legacy browser fehlt noch; daher meine Nachfrage in dem anderen thread nach dem bei mir fehlenden Kompatibilitäts-Menü im inspector). Dabei habe ich von Anfang an mitgedacht wie aus dem Einspaltendesign Schritt für Schritt ein Mehrspaltendesign werden könnte.

Und eigentlich habe ich vor genau einen der Tipps zu befolgen, den ich hier mehrfach gelesen habe: Entweder ohne mediaqueries das design so anlegen, dass, vereinfacht ausgedrückt, die Rasterelemente mit zunehmender Breite eben dort hinfallen wo Platz ist oder -und das ist die Variante für die ich mich entschieden habe- dort einen Breakpoint einzubauen, wo das design dies mit breiter werdenden viewport geraten erscheinen läßt - ohne sich dabei an Geräteabmessungen aufzuhalten.

Soweit, sogut.

Was ich nicht verstehe ist wie die Bildschirmdarstellung im Insector mit der realen Welt zusammenhängt, und das finde ich zur Beurteilung der Darstellung nicht ganz unwichtig:

Ein Iphone5 (beispielsweise) hat eine Auflösung von 1136x640, wird im Inspector mit 320x568 angegeben, also der Hälfte, oder ein viertel, Ansichtssache.

Es geht mir nicht darum hier Umrechungfaktoren zu bestimmen, sondern zu verstehen welche Grundannahmen für die Darstellung im inspector die ausschlaggebenden sind, denn die Darstellung stimmt ja weder in der angegebenen Auflösung noch in der Größe in cm mit der Realität überein.

Was besagen die Pixelangaben (die ja bei allen Geräten nicht mit der physikalischen Auflösung übereinstimmen?)

Was ich im inspector sehe ist eine äquivalente Darstellungsschärfe, mit der Konsequenz das die Darstellungsgröße nicht vom emmulierten Gerät, sondern vom Auflösungsvermögen meines Bildschirms abhängt?

Im Grunde habe ich hiermit ein Selbstgespräch geführt um mir das klar zu machen, wobei mir das mit den Pixelangaben dennoch nicht klar ist. Eigentlich möchte ich erfahren, wie ihr damit umgeht, was es vielleicht neben den blanken Zahlen zu beachten gibt, ob das eine gute Idee ist, da recht spielerisch (bei eingeschaltetem Verstand) ranzugehen und es wirklich funktioniert sich auf den Augenschein zu verlassen.

[Auge]

Hallo

Was ich nicht verstehe ist wie die Bildschirmdarstellung im Insector mit der realen Welt zusammenhängt, und das finde ich zur Beurteilung der Darstellung nicht ganz unwichtig:

Ein Iphone5 (beispielsweise) hat eine Auflösung von 1136x640, wird im Inspector mit 320x568 angegeben, also der Hälfte, oder ein viertel, Ansichtssache.

Halbe Pixel und ein Viertel der Fläche. Die große Auflösung (1136x640) ist die physikalische Auflösung des Displays. Auf Smartphones werden diese Pixel quasi in Gruppen (hier vier Stück im Quadrat) zusammengefasst, um ein logisches Pixel darzustellen und, gerade bei schrägen Linien wichtig, Übergänge schärfer zu machen.

Webseiten werden auf deinem Gerät im Browser mit einer Auflösung von 320x568 gerendert. Und nur diese Auflösung ist für dich als Websiteersteller relevant.

Es geht mir nicht darum hier Umrechungfaktoren zu bestimmen …

Auf anderen Geräten ist die Auflösung – sowohl die physikalische, als auch die logische Auflösung – eine andere. Da das Verhältnis zwischen den beiden Auflösungen je nach verbautem Display ebenfalls variiert, kannst du einen Umrechnungsfaktor gleich vergessen.

… sondern zu verstehen welche Grundannahmen für die Darstellung im inspector die ausschlaggebenden sind, denn die Darstellung stimmt ja weder in der angegebenen Auflösung noch in der Größe in cm mit der Realität überein.

Vergiss Zentimeter oder ähnliche Einheiten, solange es nicht um den Ausdruck eines Dokuments geht. Die Darstellung in den Entwicklerwerkzeugen (welchen Browsers auch immer) ist immer nur eine Annäherung an die Darstellung zum Beispiel auf einem Smartphone. Selbst zwischen Spartphones mit identischer logischer Auflösung kann sich die Darstellung unterscheiden. Dafür sorgen allein schon verschiedene in den Browsern genutzte Schriften.

Im Grunde habe ich hiermit ein Selbstgespräch geführt um mir das klar zu machen, wobei mir das mit den Pixelangaben dennoch nicht klar ist. Eigentlich möchte ich erfahren, wie ihr damit umgeht, was es vielleicht neben den blanken Zahlen zu beachten gibt, ob das eine gute Idee ist, da recht spielerisch (bei eingeschaltetem Verstand) ranzugehen und es wirklich funktioniert sich auf den Augenschein zu verlassen.

Verwende für Breakpoints als Einheit em, die sich an der Laufweite der Schrift orientiert und – ganz wichtig – lebe damit, dass Webseiten selbst bei gleicher Auflösung im Ausgabemedium nicht überall bis aufs letzte Pixel identisch aussehen.

Tschö, Auge

[michaah]

Webseiten werden auf deinem Gerät im Browser mit einer Auflösung von 320x568 gerendert. Und nur diese Auflösung ist für dich als Websiteersteller relevant.

Ok, verstanden.

Verwende für Breakpoints als Einheit em,

Das ist eh klar und ist nicht die Frage.

Ich sehe einfach dass die emulierten Geräte auf meinem TFT-Desktopbildschirm (1680x1050) absolut viel zu groß dargestellt werden. Geschätzt muß ich auf ca. 65% runterskalieren damit die Maße ungefähr stimmen, was zur Beurteilung der Größenverhältnisse interessant erscheint. Klar, dann stimmt die Schärfe nicht weil ein Smartphone viel mehr px/inch hat. Letzteres ist natürlich der entscheidende Wert für die Lesbarkeit, schon klar.

So wie ich eure Antworten verstehe ist es wohl das beste die Darstellung so zu nehmen wie sie ist und dann Breakpoints nach Augenschein zu setzen.

[Gunnar Bittersmann]

@@michaah

Ein Iphone5 (beispielsweise) hat eine Auflösung von 1136x640

Gerätepixel. Damit solltest du nie etwas zu tun haben. Vergiss einfach, dass sich der Bildschirm aus Pixeln zusammensetzt. Die sind heutzutage sowieso oft so klein geworden, dass man sie nicht mehr sieht.

wird im Inspector mit 320x568 angegeben

CSS-Pixel (px). Per Definition 96px = 1in.

😷 LLAP

[Rolf B]

Hallo michaah,

Pixel sind ein Problem auf Smartphones, weil Maßangaben in px einen bestimmten dpi-Wert des Displays implizieren, um zu lesbaren Ergebnissen zu führen. Bei Desktop-Bildschirmen war dieser Wert für lange Zeit relativ konstant zwischen 90 und 100. Auf einmal kommen die Retina-Displays mit 200 und mehr, und damit sind px Angaben ein Problem, weil man für font-size:16px auf einmal eine Lupe braucht.

Weil es aber noch genug Leute gibt (viel zu viele), die ihre Webseiten mit px bemaßen statt vw, %, em oder ähnlichem, musste man eine Krücke schaffen. Die Größe dieser Krücke findest Du in der Eigenschaft displayPixelRatio des Window Objekts, es ist das Verhältnis von Display-Pixeln zu CSS-Pixeln.

Auf meinem Non-Retina Desktop Oldtimer ist deren Wert 1, was bei 24" Diagonale 94,3dpi sind. Auf dem von Dir genannten iPhone beträgt die Pixeldichte bei angenommenen 6 Zoll Diagonale 217dpi. Also mehr als das Doppelte meines Monitors, allerdings ist der auch weiter weg von meiner Nase als ein iPhone. Deswegen dürfte das iPhone ein devicePixelRatio von 2 haben (ob es auch Geräte mit non-integer Werten gibt, weiß ich nicht).

Jedenfalls designst Du für die CSS Pixel, nicht für die Display Pixel. Deswegen ist es richtig, wenn der Browser Dir 320x568 anzeigt statt 640x1136.

Wenn Du deine Maße in em, rem oder % vergibst, kann der Browser das unter der Haube schön an die Display-Pixel anpassen. Die 320x568 sind für alle Maßangaben relevant, die der Anwender in px macht.

Rolf

[Gunnar Bittersmann]

@@Rolf B

und damit sind px Angaben ein Problem, weil man für font-size:16px auf einmal eine Lupe braucht.

Nein. Du verwechselst Gerätepixel und CSS-Pixel.

😷 LLAP

[Rolf B]

Hallo Gunnar,

doch. Der erste Abschnitt beschreibt den hypothetischen Fall, dass es keine Unterscheidung zwischen Geräte- und CSS-Pixel gäbe. Was bei Lektüre des zweiten Abschnitts eigentlich hätte klar werden sollen. Da war ich denn wohl zu undeutlich.

Rolf_

[Der Martin]

Hallo,

[dpi] Bei Desktop-Bildschirmen war dieser Wert für lange Zeit relativ konstant zwischen 90 und 100.

AFAIK wurde der zu Zeiten von VGA-Bildschirmen mehr oder weniger willkürlich auf 96 festgelegt, was bei einem 9"-Bildschirm etwa der Realität entspricht. Allerdings wurde dieser Wert quasi aus Gewohnheit auch bei größeren Bildschirmen beibehalten. Ein 12"-Bildschirm mit VGA-Auflösung hat aber in Wirklichkeit nur noch etwa 66dpi.

Als dann höhere Bildschirmauflösungen populär wurden, schrumpften die Schriften, weil kaum jemand daran dachte, den dpi-Wert anzupassen. Erst Windows 3.1 unterschied endlich zwischen "1024x768, Small Fonts" und "1024x768, Large Fonts". Bei der Auswahl "Large Fonts" wurde dann auch der DPI-Wert auf 120 gesetzt. Stimmt aber auch nur bei etwa 10.5" Bildschirmdiagonale, bei 15" (lange Zeit eine beliebte Bildschirmgröße) wäre es etwa 85.

Fazit: Der DPI-Wert für Bildschirme ist historisch eigentlich immer nur eine grobe Abschätzung gewesen und hatte mit der Urbedeutung der Abkürzung "dots per inch" nicht viel zu tun.

Auf meinem Bildschirm, der hier vor mir steht, habe ich übrigens "in echt" etwa 90dpi (1600x1200 bei knapp 22" Diagonale).

Live long and pros healthy,
 Martin