Smartphones in Entwicklertools simulieren

[Caspian DeConwy]

Hallo,

ich wollte mal am Desktop verschiedene Smartphone-Auflösungen simulieren um zu sehen, wieviel man jeweils im Display sehen würde. Ich weiß aber nicht, welche Werte ich für verschiedene Geräte in Chrome in den Entwicklertools angeben muss. Die Devices dort werden wohl nicht mehr gepflegt; simulieren möchte ich bspw. das LG G7, das Pixel 4a, das Galaxy S20 und das iPhone 11 Pro.

Weiß jemand welche Auflösung man verwenden muss?

 

[t0oastaa]

kannst du nicht einfach die Auflösung aus den Specs der jeweiligen Geräte nehmen? Sollten sich doch leicht finden lassen per Google z.B.

 

[honky-tonk]

dort sind nur die google telefone hinterlegt...für alles andere genügt eine google suche ;-)

 

[Caspian DeConwy]

Das funktioniert nicht wegen der Pixeldichte oder so. Aktuelle Smartphones haben ja teils höhere Auflösungen als Desktopmonitore. Das LG G7 - 3120x1440 Pxiel - wird dann so angezeigt (quasi wie auf einem Desktopmonitor mit dieser Auflösung):

​

Man muss die DPI o.ä. mit berücksichtigen.

Bsp: das iPhone X hat eine Auflösung von 2436x1125 - in den Entwicklertools wird aber als Auflösung 812x375 verwendet.

 

[blackbirdone]

So ist es du musst das mit einrechnen. Such dir ein Telefon deiner Wahl rechne es um uns trage die Auflösung ein fertig
Auf github findet sich aber sicher jemand der es schon gemacht hat

 

[Caspian DeConwy]

Und wie muss ich das umrechnen?

Beim iPhone X ist die Auflösung in den Entwicklertools um den Faktor 3 geringer als die tatsächliche Auflösung. Wie komm ich denn auf die 3 (bei anderen Geräten ist es ein anderer Faktor)?

 

[Caspian DeConwy]

Hat noch jemand eine Idee, wie man die Auflösung berechnet?

 

[efcoyote]

Kurze Suche mit einer Suchmachine deiner Wahl für zu einem Android Artikel und zu einem Video, in dem das ganze Thema sehr gut erklärt wird. Stichwort: density-independent pixel

 

[Caspian DeConwy]

Das haut aber auch nicht hin.

Laut des Videos müsste man für das LG G7 den Faktor 3 verwenden; bei einer Auflösung von 3120x1440 Pixel müsste man in den Dev-Tools also 1040x480 Pixel angeben.

Vergleiche ich die Darstellung in den Dev-Tools aber mit dem echten LG G7, dann sehe ich in den Dev-Tools deutlich mehr in der Höhe.
Mit Rumprobieren - um dieselbe Darstellung zu bekommen - müsste ich in den Dev-Tools den Faktor 3,4 verwenden: 920x425 Pixel.

 

[efcoyote]

Wahrscheinlich muss man auch die Auflösung und die Skalierung des PC-Bildschirms mit einberechnen.

 

[Caspian DeConwy]

Ne, das spielt keine Rolle.

 

[efcoyote]

Das LG G7 hat eine PPI von 564 und fällt damit in die XXXHDPI Klasse mit dem Faktor 4. Die Entsprechung im Browser wären daher 360x780 Pixel. Wenn du allerdings auf dem Bildschirm die genau gleiche Breite und Höhe in inch wie das Handy an sich ist, dann musst du einen einfachen 3-Satz anwenden. Da spielt die Bildschirmbreite und Auflösung dann schon eine Rolle:

x / ppi-Monitor = 1440 / 564

 

[Caspian DeConwy]

Ah, danke, da hab ich mich vertan. 360x780 scheint korrekt zu sein - die Darstellung ist vergleichbar zum Handy.
Dann komme ich damit weiter.

Aber ich sehe keinen Unterschied bei anderen Auflösungen; auch wenn's ein anderes Seitenverhältnis ist.

Aber komisch, dass vordefinierte Geräte in den Dev-Tools teils einen "krummen" Faktor haben; das gibt's laut des Videos nicht.

 

[efcoyote]

Wenn du auf das Pixel anspielst, dann ist das in der Tat etwas seltsam. Dort wird nämlich ein Faktor von 2,6 angewendet:
https://material.io/resources/devices/