Webseiten Erstellung - Bildschirmgröße testen

RollerMan

Hallo,

erstellt man eine Webseite, kann man diese auch gleich testen, wie sie auf anderen Geräten aussieht. Dazu geht man im Menü auf weitere Werkzeuge - Bildschirmgröße testen. Hier findet man auch eine Liste verschiedener Geräte. Scheint eines nicht in dieser Liste auf, kann man eines hinzufügen. Und genau dazu hätte ich eine Frage. Ich möchte mein Samsung Galaxy S7 plus hinzufügen. Die Displaygröße beträgt 2800x1752 Pixels. Habe ich das Tablet so richtig hinzugefügt ?

Danke für die Hilfe.

Sören Hentzschel

Hallo,

die im Screenshot von dir grün markierte Angabe ist zwar die Auflösung, allerdings haben Smartphones eine so hohe Pixeldichte, dass die physikalischen Pixel nicht den tatsächlichen Viewport-Dimensionen entsprechen. Öffne am Smartphone die Seite https://www.mydevice.io/ und dann wird dir angezeigt, was die Viewport-Dimensionen auf deinem Smartphone sind. Da siehst du auch die korrekte Angabe für das Gerät-Pixel-Verhältnis, was mit Sicherheit nicht 1 ist, sondern vermutlich 2 oder 3. Smartphones sind außerdem Touch-Geräte, das Häkchen muss also aktiviert werden, und der User-Agent zeigt in deinem ersten Screenshot auch noch den eines Firefox auf Windows an.

RollerMan

Hi Sören,

vielen Dank! Diese Website hilft mir wirklich weiter.

Könntest du mir noch erklären, was der Unterschied zwischen JS screen.width und JS screen.height bzw. @media (device:width) und @media (device-height) ist ? Welche Angaben nimmt man da ?

Danke dir

Sören Hentzschel

Die @media-Werte scheinen mir gerundete Werte zu sein. Wenn du die exakten Werte möchtest, nimm das, was mit „JS“ beschriftet ist.

RollerMan

Eine allerletzte Frage noch. Was bedeutet die Angaben beim Punkt "Pixel Ratio" ?

Danke

Sören Hentzschel

Das ist das Verhältnis von physikalischen zu CSS-Pixeln. Ich deutete ja bereits eine hohe Pixeldichte von Smartphones an. Eine Device Pixel Ratio von 2 bedeutet, dass CSS-Pixel aus jeweils doppelt so vielen physikalischen Pixeln in der Breite sowie in der Höhe bestehen. Du kannst hier auch wieder die JS-Angabe nutzen, wenn du genau sein möchtest (den Punkt kannst du als Komma lesen, er muss nur eben als Punkt eingetragen werden, da internationales Format).

RollerMan 19. Mai 2022 um 13:07