Auflösung des Browsers im Smartphone

[Ahriman]

Hi,

ich bin gerade dabei meine Website ans Smartphone anzupassen.

Ich nutze dazu den Chrome Browser an meinem Desktop PC, rufe eine Seite meiner Website auf und drücke F12. Dann kann ich zwischen verschiedenen Smartphones auswählen, welches ich simulieren möchte.

Das iPhone X10 hat dabei eine voreingestellte Auflösung von 375 x 812 Pixel. Die maximale Auflösung des X10 beträgt 2436 × 1125 Pixel, mir ist bewusst, dass diese nicht beim Anzeigen des Browsers verwendet wird, zumindest wird etwas umgerechnet, denn sonst wäre die Schrift sehr klein.

Ist 375 x 812 also die Auflösung des X10 im Browser?

Hier ein Screenshot:

Ich möchte nun wissen, welche Auflösung z.B. beim Samsung Galaxy S10 und S20 im Browser verwendet wird, diese Smartphones kann man bei Chrome nämlich nicht auswählen.

Wisst ihr wie ich das herausfinde?

Würdet ihr anders vorgehen die Website mobile friendly zu machen?

Danke!!

 

[Pako1997]

Warum Pixel?
Wichtig ist lediglich wie groß Elemente im Verhältnis zur Bildschirmdiagonale angezeigt werden (Also ppi). Das wird z.B. durch die Schriftgröße auf der Webseite festgelegt und dann vom Handybrowser verarbeitet.

reicht es dir nicht wenn die Webseite im Hochformat auf einen iPhone vernünftig dargestellt wird (und dann aufgrund ähnlicher Größe auch bei den meisten anderen)?

 

[kachiri]

Wenn es Responsive sein soll, niemals, aber wirklich niemals mit fixen Angaben arbeiten - außer man gibt z.B. eine Mindestbreite oder Höhe vor. Pixelangaben sind ein No-Go. Damit hast du irgendwo immer ein Gerät, wo es nicht passt und bist ständig dabei, deine Seite anzupassen.

Viel wichtiger als die Auflösung, sind das Display-Verhältnis. Am Desktop hat man in der Regel 16:9, 16:10 oder auch mal 3:2, auf dem mobilen Endgerät dreht sich das Verhältnis. Das gilt eben zu berücksichtigen, in dem man bloß keine starren Layouts bastelt, sondern flexible Elemente, so dass Elemente die auf dem Rechner nebeneinander sind, auf dem Smartphone untereinander stehen.

 

[Serana]

Die Werte für Galaxy S10 und S20 (falls du das wirklich willst) kannst du dir ganz leicht selbst ausrechnen. Die errechnen sich nämlich aus dem Seitenverhältnis.

Das Galaxy S10 hat eine Auflösung von 1440x3040 Pixel.
1440 / 3040 = 0,473684211

Nehmen wir mal an dein gedachter Bildschirm hat eine Höhe von 1000 Pixeln, dann ergeben sich in der Breite 474 Pixel.
1000 x 0,473684211 = 473,684211
474 / 1000 = 0,474

Das Spiel kannst du mit jedem Monitor machen. Allerdings solltest du niemals mit absoluten Pixelangaben arbeiten, da das dann wirklich nur auf einem Bildschirm mit genau dieser Auflösung funktioniert. Diesen Mist hat man früher beim Webdesign gemacht und hatte dann Webseiten die z.B. auf 1280x1024 Pixel "optimiert" waren. Das freute dann alle deren Monitor dummerweise eine andere Auflösung hatte. Irgendwann kam dieser Blödsinn zum Glück aus der Mode.

 

[Ahriman]

Danke für eure Hilfe!

Ich wusste nicht, dass es praktischer ist mit ppi zu arbeiten, klingt aber logisch. Leider habe ich schone meine gesamte Website mit Pixeln gemacht und jetzt ist sie auch fast fertig.

Vielleicht stell ich aber trotzdem alles um.

Ich arbeite mit Divi, dort kann ich neben Pixel noch %, VW, VH, EM und REM eingeben. Mit welchem Wert würdet ihr mir empfehlen zu arbeiten?

 

[Piktogramm]

Anstatt festzustellen was du alles eingeben kannst, solltest du versuchen dir eine gescheite Doku zu suchen. Also Suchmaschine mit sowas wie:
"css size units"
"css size best practice"

Es gibt sowieso keine einzelne, richtige Angabe. Es gibt immer das passende und um das entscheiden zu können brauchst du selbst das entsprechende Wissen.

 

[Ahriman]

Danke, ich les mich da mal ein.