Hallo,
Auch die Grössen sind anders. Z.B das iPhone5/SE hat in der Realität 1334 x 750 Pixel. In der Firefox Funktion werden für das gleiche Gerät 320x568 angegeben.
Du verwechselst die Bildschirmauflösung mit tatsächlicher Größe. Smartphones verwenden üblicherweise hochauflösende Bildschirme, bei denen ein realer Pixel durch mehrere Pixel dargestellt wird, um die Bildqualität zu verbessern. Als Entwickler, der eine Website an verschiedene Bildschirmgrößen anpassen möchte, ist die tatsächliche Größe für dich relevant. Denn die ist es, die du in Media Queries etc. verwenden musst. Und da sind die Angaben von Firefox definitiv die richtigen. Kein Smartphone hat eine reale Breite von über 1.300 Pixeln, das wäre eine Desktop-Größe.
Smartphones verwenden üblicherweise hochauflösende Bildschirme, bei denen ein realer Pixel durch mehrere Pixel dargestellt wird, um die Bildqualität zu verbessern.
Ich weiß, was du meinst, aber deine Begrifflichkeiten verwirren mich etwas 
. Bei digital angesteuerten Bildschirmen ist ein "realer" Pixel grundsätzlich immer ein einzelner diskreter, physischer Bildpunkt (= Pixel), gegeben durch die native Auflösung der Hardware und wird nicht durch mehrere Pixel dargestellt. Ein 'Pixel' ist definitionsgemäß die kleinste Einheit, auch 'Subpixel' haben damit nichts zu tun. Und nur die native Auflösung wird standardmäßig genutzt. Es ist zwar möglich an einem digital angesteuerten Bildschirm niedrigere Auflösungen über Treiber bzw. OS einzustellen, macht man normalerweise aber nicht, da dann das Ergebnis unscharf ist, weil interpoliert werden muss. Das, was du offenbar meinst, ist eine (optionale) softwareseitige Skalierung von Bildschirmelementen in Bezug auf die Punktedichte, also dem Verhältnis der nativen Auflösung (= Breite und Höhe in Pixeln) zur Bildschirmdiagonale (in Zoll/cm).
Kein Smartphone hat eine reale Breite von über 1.300 Pixeln, das wäre eine Desktop-Größe.
Doch, fast alle aktuellen Smartphones haben höhere Auflösungen. Meins hat z.B. eine Breite von 1440px, deines vielleicht noch mehr. Und jeder einzelne Bildpunkt ist auch einzeln ansteuerbar und mit Mühe noch mit bloßem Auge sichtbar: (ohne Zoom!) .
Die Punktedichte kann man so ausrechnen: heise
Z.B: Mein Samsung S20 hat eine Auflösung von 1440x3200 und eine Bildschirmdiagonale von 6,2":
Das ergibt dann eine Pixeldichte von 566ppi. Also 566 Pixel pro 2,54 cm. Dieser Wert wird noch in Bezug gesetzt zur Auflösung des Bildschirms, auf dem das zu testende Device dargestellt werden soll. Mit der Einstellung "Galaxy S20..." im Bildschirmgrößen-Tester wird mir eine DPR von 4 angezeigt, sprich 360x800. Die simulierte Displaygröße auf meinem Bildschirm entspricht dann einigermaßen genau der Displaygröße (in cm) meines realen Samsung Smartphones. Einfach mal zum Vergleich das Smartphone auf den Bildschirm halten.
Und das ist ja das Ziel dieser Übung, um das Verhalten und Aussehen der Webseite auf anderen Devices testen zu können...
Bei digital angesteuerten Bildschirmen ist ein "realer" Pixel grundsätzlich immer ein einzelner diskreter, physischer Bildpunkt (= Pixel), gegeben durch die native Auflösung der Hardware und wird nicht durch mehrere Pixel dargestellt. Ein 'Pixel' ist definitionsgemäß die kleinste Einheit, auch 'Subpixel' haben damit nichts zu tun. Und nur die native Auflösung wird standardmäßig genutzt. Es ist zwar möglich an einem digital angesteuerten Bildschirm niedrigere Auflösungen über Treiber bzw. OS einzustellen, macht man normalerweise aber nicht, da dann das Ergebnis unscharf ist, weil interpoliert werden muss. Das, was du offenbar meinst, ist eine (optionale) softwareseitige Skalierung von Bildschirmelementen in Bezug auf die Punktedichte, also dem Verhältnis der nativen Auflösung (= Breite und Höhe in Pixeln) zur Bildschirmdiagonale (in Zoll/cm).
Es gibt mehrere Pixel-Begriffe. Bei einem hochauflösenden Bildschirm wird jeder „logische“ Pixel durch mehrere „physische“ Pixel dargestellt. Ich sprach von „realen“ Pixeln für die „logischen“ Pixel, weil der Themenstarter den Begriff Realität eingebracht hat und die logischen Pixel die Realität für die Website-Entwicklung sind, um die es in diesem Thema geht.
Doch, fast alle aktuellen Smartphones haben höhere Auflösungen. Meins hat z.B. eine Breite von 1440px, deines vielleicht noch mehr.
Ich schrieb doch ausdrücklich, dass es nicht um die Auflösung geht. Die ist für die Website-Entwicklung völlig irrelevant. Es geht um logische Pixel. Auch dein Smartphone hat keine logische Breite von 1440px, weil es dann kein Smartphone wäre. Ich erstelle seit über 15 Jahren Websites. Du kannst mir glauben, dass wenn ich die Darstellung einer Website für Smartphones anpasse, es dabei um Breiten irgendwo im Bereich zwischen 320 und 430 Pixel geht (in Ausnahmen vielleicht noch etwas mehr), aber niemals um 1440px, nicht einmal annähernd. Wenn der Themenstarter eine Website für mobile Endgeräte optimieren möchte, muss er die logischen Angaben in CSS Media Queries oder in JavaScript verwenden. Es hat schon einen Grund, wieso ausnahmslos alle Browser in den Entwicklerwerkzeugen die logischen Dimensionen angeben.
Siehe auch folgende Tabelle. Es geht um die Spalte „Logical Width“:
Die Punktedichte kann man so ausrechnen: heise
Ausrechnen muss der Themenstarter ehrlich gesagt gar nichts. Er muss so oder so sicherstellen, dass die Website bis zum Minimalwert von 320px gut aussieht. Man optimiert nicht für spezifische Geräte, sondern für Fenstergrößen und es hat mehr oder weniger jedes Smartphone eine andere Größe.
Es gibt mehrere Pixel-Begriffe. Bei einem hochauflösenden Bildschirm wird jeder „logische“ Pixel durch mehrere „physische“ Pixel dargestellt. Ich sprach von „realen“ Pixeln für die „logischen“ Pixel, weil der Themenstarter den Begriff Realität eingebracht hat und die logischen Pixel die Realität für die Website-Entwicklung sind.
Ich habe extra von "Begrifflichkeiten" geschrieben und ein "realer" Pixel ist kein "logischer" Pixel, sondern eben ein physikalischer Pixel. Genauso ist das Wort Pixel auch definiert worden. Anstatt von "logischen Pixeln" könnte man auch von geräteunabhängigen Pixeln oder CSS-Pixel sprechen, um den Zusammenhang zur Punktedichte herzustellen.
Der Themenstarter hat die native Auflösung als "Realität" in seiner Frage formuliert. Du hingegen definierst den Begriff "real" bezogen auf die Webentwicklung und sagst dann es wären "logische" Pixel . Sinnvoll wäre es doch gewesen, den Unterschied zwischen physischen Pixel und der Punktedichte bei unterschiedlichen Devices zu erklären, was ich auch dann weiter unten gemacht habe und du die Angabe der Berechnung für unnötig erachtest hast. Verstehe ich nicht? Es geht doch um das Grundverständnis einer Problematik und da können Hintergrundinformation doch sehr nützlich sein...
Ich schrieb doch ausdrücklich, dass es nicht um die Auflösung geht.
Kein Smartphone hat eine reale Breite von über 1.300 Pixeln
Die Breite, wenn du sie mit 1300 Pixeln(!) angibst, bezieht sich bei Displays immer auf die Auflösung in physischen Pixeln. Du hast nichts von einer logischen Breite geschrieben sondern extra noch die reale Breite erwähnt.
Wie ich schon im ersten Beitrag ganz am Anfang schrieb, ging es mir in deinem Beitrag ausschließlich um die verwirrende Verwendung der Begriffe "real/logisch/Pixel" und nur das habe ich thematisiert und dann dem Themenersteller eben noch meine Erklärung zum Thema nachgeschoben .
Ich habe extra von "Begrifflichkeiten" geschrieben und ein "realer" Pixel ist kein "logischer" Pixel, sondern eben ein physikalischer Pixel. Genauso ist das Wort Pixel auch definiert worden. Anstatt von "logischen Pixeln" könnte man auch von geräteunabhängigen Pixeln oder CSS-Pixel sprechen, um den Zusammenhang zur Punktedichte herzustellen.
Logischer Pixel ist der korrekte Fachterminus und den Begriff der Realität hat wie gesagt der Themenstarter selbst eingebracht, ich habe durch meine Formulierung einen Übergang zu eben jener Realität geschaffen. Denn Fakt ist: logische Pixel repräsentieren die Realität für die Entwicklung und nur darum geht es in diesem Thema. Die physischen Pixel sind interessant für die Bildqualität und nicht zuletzt auch für das Marketing, aber nicht, wenn du eine Website für bestimmte Fenstergrößen anpassen möchtest. Das sind völlig unterschiedliche Themen.
Der Themenstarter hat die native Auflösung als "Realität" in seiner Frage formuliert. Du hingegen definierst den Begriff "real" bezogen auf die Webentwicklung und sagst dann es wären "logische" Pixel
Ergibt ja auch Sinn: Der Themenstarter hat schließlich ganz eindeutig formuliert, dass es hier um Webentwicklung geht. Und damit ist auch die Realität definiert.
Der Themenstarter ging von einer falschen Annahme aus, wie es nicht ungewöhnlich für jemanden ist, der sich mit einem Anliegen im Support meldet. Logische Pixel ist wie gesagt der korrekte Fachbegriff für das, was für den Themenstarter relevant ist. Das habe ich mir nicht ausgedacht, weil ich es logischer finde, das heißt so.
Sinnvoll wäre es doch gewesen, den Unterschied zwischen physischen Pixel und der Punktedichte bei unterschiedlichen Devices zu erklären, was ich auch dann weiter unten gemacht habe und du die Angabe der Berechnung für unnötig erachtest hast. Verstehe ich nicht? Es geht doch um das Grundverständnis einer Problematik und da können Hintergrundinformation doch sehr nützlich sein...
Das kann man natürlich alles erklären, ist aber Bildschirm-Theorie und hilft dem Themenstarter für sein konkretes Anliegen kein bisschen. Wenn ihn das interessiert, ist das schön, dann kann er sich über deine Erklärungen freuen. Alles in Ordnung. Ich bin auch immer an Hintergrundinformationen interessiert. Dass ich darauf verzichtet habe, war aber kein Versäumnis meinerseits. Es ist schlicht und ergreifend für das formulierte Ziel nicht relevant und ich wollte die Antwort nicht unnötig kompliziert machen. Denn das Anliegen selbst ist sehr einfach und erfordert nicht, dass man da etwas berechnet.
Die Breite, wenn du sie mit 1300 Pixeln(!) angibst, bezieht sich bei Displays immer auf die Auflösung in physischen Pixeln.
Und genau diese Angabe ist für den Themenstarter irrelevant und das, was ich mit falscher Annahme meinte. Der Themenstarter war darüber verwirrt, dass die Angabe von Firefox nicht der Angabe entspricht, die er für relevant hielt.
Du hast nichts von einer logischen Breite geschrieben sondern extra noch die reale Breite erwähnt.
Ich schrieb von realen Pixeln, weil du bei einem iPhone 5 in der Realität 320px Breite zur Verfügung hast, nicht 1334px, nur weil die Auflösung das sagt.
Wie ich schon im ersten Beitrag ganz am Anfang schrieb, ging es mir in deinem Beitrag ausschließlich um die verwirrende Verwendung der Begriffe "real/logisch/Pixel" und nur das habe ich thematisiert
Du bringst auch noch physikalische Pixel für physische Pixel ins Spiel. Das sind zwar ähnlich aussehende, aber im Deutschen sehr unterschiedliche Begriffe. Das verringert die Verwirrung jetzt auch nicht unbedingt. 
Jedenfalls sollte ja spätestens seit Beitrag #4 geklärt sein, was real in diesem Kontext meinte.
Ladet euch für android die app "display tester" und lasst euch davon zeigen/erklären.
Gut, hätten wir die unterschiedlichen Ansichten zur Begrifflichkeit geklärt. Bene!
Aber.....
Du bringst auch noch physikalische Pixel für physische Pixel ins Spiel. Das sind zwar ähnlich aussehende, aber komplett unterschiedliche Begriffe.
Nein, die beiden Begriffe kann man synonym verwenden. '1 Pixel' ist eine physikalische Größe, da er alle Kriterien dafür erfüllt: er besteht aus einem Zahlenwert multipliziert mit einer konstanten Einheit der selben Art und ist messbar. Bei einem Bildschirm spricht man dann auch von 'Auflösung' z.B. 1440 Pixel Breite, wobei der Begriff Auflösung wiederum mehrdeutig sein kann (Anzahl der Pixel absolut vs. Pixel pro Maßeinheit). Ein physischer Pixel ist einfach das kleinste noch ansteuerbare Element innerhalb der Hardware. Aber es beschreibt den gleichen Sachverhalt ...
Eine Auflösung, die exakt der physikalischen digitalen Auflösung (Pixelzahl) eines Anzeigegerätes entspricht, wird als native Auflösung bezeichnet.
Ein Bild sagt mehr als tausend Worte. Deshalb ist bei CSS mit den "Density DPI" zu arbeiten und nicht mit der Pixel-Auflösung. Firefox benötigt zwingend die Density DPI und den Density Scale -> DPR. Wenn man mal ein fertiges Gerät mit Bildschirmgrößen auswählt, wird es hoffentlich klarer. Ansonsten geht so ziemlich alles in die Hose, was man dabei nur machen kann, nichts passt.
Deshalb ist bei CSS mit den "Density DPI" zu arbeiten und nicht mit der Pixel-Auflösung. Firefox benötigt zwingend die Density DPI und den Density Scale -> DPR. Wenn man mal ein fertiges Gerät mit Bildschirmgrößen auswählt, wird es hoffentlich klarer.
Diese Erkenntnis steht wirklich in jedem einzelnen Beitrag von Sören und mir drin. Sogar erklärt, wie man zu diesen Werten kommen kann. Was soll denn da "klarer" werden und vor allem wem, dem TE? Einfach mal durchlesen! Dazu brauchst du auch kein Extra-Tool auf dem zu testenden Smartphone. Es geht ja gerade darum, mittels Firefox' Bildschirmgrößen-Tester diesen Test durchzuführen, um auf der Entwicklungsmaschine (PC) die richtige "Abbildung" zu finden.
Kein Grund, aggro zu werden. Firefox kennt nicht jedes Phone und der Umweg über ne heise-Seite, die keiner kennt und auch erst mal gefunden werden muss, halte ich nicht für optimal. Tatsache ist, dass der Wert in Firefox für das S10 falsch ist, es sind für CSS nur 740px und keine 760px. Du und andere können gerne rechnen, ich halte mich lieber an die Daten, die vom Gerät ausgelesen werden können. Mein Xiaomi steht zB nicht drin und da sind sogar Angaben bei notebookcheck falsch, vom Hersteller bekommt man genau nichts dazu.
Unabhängig davon halte ich ein 5SE nicht mehr als zeitgemäss, auch wenn ich es immer noch als Zweitphone nehmen würden, wenn es nicht so unverschämt teuer wäre, selbst gebraucht Der Unterschied zu meinem S10 ist allerdings schon eklatant, auch wenn die Density hier nur 340x740 angibt.
Tatsache ist, dass der Wert in Firefox für das S10 falsch ist, es sind für CSS nur 740px und keine 760px.
Glaube ich nicht, dass das eine Tatsache ist. Ich habe auf mehreren Websites geschaut und ausnahmslos alle sagen 760px, genau wie Firefox. Die Modellnummer des Smartphones, welches dein Screenshot zeigt, gehört auch nicht zum Galaxy S10, sondern zum Galaxy S9. Das hat tatsächlich nur 740px Höhe. Und auch das ist in Firefox richtig hinterlegt.
Die Höhe eines Smartphones ist allerdings sowieso selten relevant, wenn es um die Optimierung einer Website für mobile Endgeräte geht. Normalerweise interessiert einen da nur die Breite. Denn vertikal scrollen (oder swipen) ist ja kein Problem.
Kein Grund, aggro zu werden.
Ich werde nie "aggro", höchstens mal extrem aggressiv ...
Gibt ja bei der Auswahl an Smartphones, Auflösungen wie Sand am Meer. Ich glaube, für potentiell jede Auflösung einen Test zu fahren, wäre ein etwas verwegenes Unterfangen. Mag sein, dass im Firefox nur die wichtigsten Vertreter aufgeführt sind. Also bei meinem Smartphone (S20) haben die Angaben gestimmt. Bin jetzt kein Website-Entwickler, aber solche umfassenden Tests für alle SP werden doch wohl höchstens von Firmen bezahlt, die sich das auch leisten können.
Ich glaube, für potentiell jede Auflösung einen Test zu fahren, wäre ein etwas verwegenes Unterfangen […] Bin jetzt kein Website-Entwickler, aber solche umfassenden Tests für alle SP werden doch wohl höchstens von Firmen bezahlt, die sich das auch leisten können.
Man darf tatsächlich von jedem, der Websites nicht nur zum Hobby erstellt, erwarten, dass die Websites mit allen Bildschirmen (nicht nur auf Smartphones bezogen!) funktionieren, unabhängig vom Budget. Das ist aber auch nicht so kompliziert. Ich schrieb es ja schon in Beitrag #4: Man optimiert für Fensterbreiten, nicht für bestimmte Geräte. Und dann ist es normalerweise auch nicht so, dass sich das Layout bei jeder einzelnen Pixelzahl potenziell verändert. Meistens gibt es sogenannte Breakpoints, an denen sich das Layout verändern kann. Ich nutze beispielsweise für alle Kunden das Bootstrap-Grid. Zwischen den Breakpoints gibt es im Normalfall keine Layout-Veränderungen, weil sich die Container-Größe innerhalb dieser Breiten nicht verändert. Unterhalb vom kleinsten Breakpoint, wenn es um Smartphone-Größen geht und der Container keine feste Pixelzahl mehr hat, sondern mehr oder weniger die Fensterbreite ist, kann es theoretisch natürlich schon zu einer Verschiebung kommen, die je nach Gerätebreite auftritt oder nicht auftritt. Auch dann bringt es einen nicht weit, bestimmte Geräte zu testen, weil man damit nur einen Bruchteil der realen Nutzer abdecken könnte. Aber man kann die Breite im Responsive Design Modus ja einfach durch Ziehen verändern und sieht dann sofort, wo ggf. Optimierungen vorzunehmen sind. Dass ich unterhalb von 575px nochmal eine spezielle Behandlung für ein Unterschreiten einer bestimmten Breite vornehmen muss, kommt vor, aber sehr viel seltener, als man vielleicht denkt. Und wenn, dann ist es meistens auch nur ein zusätzlicher Breakpoint, der behandelt werden muss, und nicht fünf weitere. Wenn doch, spricht das eher für einen Mangel im Design. In den Designs, die ich aus der Design-Abteilung erhalte, war das noch nie ein Thema.
Die Option in Firefox, ein Gerät auszuwählen, dient eigentlich nur einer schnellen Überprüfung, wie sich eine Website bei bestimmten weit verbreiteten Geräten verhält. Darauf sollte sich die vollständige Überprüfung des Entwicklers aber nie beschränken.
Danke für die Infos!
Aber man kann die Breite im Responsive Design Modus ja einfach durch Ziehen verändern und sieht dann sofort, wo ggf. Optimierungen vorzunehmen sind.
Genau so würde ich es wohl auch machen. Aber da das Erstellen von Webseiten nichts für mich ist, sollen sich die Leute den Kopf drüber zerbrechen, die damit ihr Geld verdienen...
Genau so würde ich es wohl auch machen. Aber da das Erstellen von Webseiten nichts für mich ist, sollen sich die Leute den Kopf drüber zerbrechen, die damit ihr Geld verdienen...
Da hast vollkommen recht.
Warum bekommen das heute immer noch nicht viele auf die Kette? Also genau das Gegenteil von Sören Hentzschel .
Der folgende Link ist als Beispiel zu sehen wie es ohne oder teilweise fehlendes responsive Design aussieht,
es ist eine lokale Nachrichtenseite:
Diese Seite hier, camp-firefox.de, sieht auf einem alten Android 9 mit FF 126.0 Android genauso gut aus und strukturiert wie auf einem 4k oder 5k Bildschirm.
Warum bekommen das heute immer noch nicht viele auf die Kette?
Heute sind die allermeisten Websites ja glücklicherweise sehr gut auf dem Smartphone bedienbar. Auf der von dir verlinkten Seite steht unten „©2007“. Wenn das das Jahr der letzten technischen Aktualisierung ist, erklärt das natürlich einiges. Das ist das Erscheinungsjahr vom ersten iPhone, Smartphones waren vorher noch nicht populär und Responsive Design noch kein Thema.
Und eine Seite, die mit damals üblichen Code-Standards geschrieben wurde, bekommst du halt auch nicht so einfach für Mobilgeräte angepasst, die muss de facto komplett neu geschrieben werden. Und wenn du das nicht selbst kannst, sondern beauftragst, kostet das selbst bei einem kleinen Funktionsumfang in einem professionellen Rahmen ein paar Tausend Euro, Preis nach oben hin offen. Das muss man sich halt auch leisten können und wollen. Und letztlich ist das ja auch eine Zielgruppen-Frage. Wenn du 50 Prozent Smartphone-Nutzer hast, bist du vermutlich eher gewillt, diese Investition zu tätigen, als wenn sowieso 99 Prozent der Besucher einen Desktop-Browser nutzen. Thematisch vermute ich mal stark, dass diese Website eher ein altes Zielpublikum anspricht, wo der Bedarf für eine gute Smartphone-Nutzung vermutlich nicht so groß ist, wie bei beispielsweise Instagram, um mal ein extremes Gegenbeispiel zu nennen.
Darauf sollte sich die vollständige Überprüfung des Entwicklers aber nie beschränken.
Ich nutze Seiten, die ich angepasst habe. Sicher hat der Test am Desktop die Vorbereitung erledigt, aber die groben Schnitzer und Feinheiten muss ich per ADB ausbügeln - und ich finde immer noch was.
Mal eine Frage von jemanden der nicht vom Fach ist: Was ist um Bezug auf Displaygröße und responsive Design von dem Angeboten der Hosting-Anbieter zu halten für Webseiten-Baukästen?
Kann ich dir nichts zu sagen, nutze keine Angebote. Falls Sören auch nichts hat, müsstest du jeden Bewerber direkt fragen. Nur wurde oben ja schon betont, dass man heutzutage gar nicht mehr ohne kann bzw sollte.
