Webseiten Erstellung - Bildschirmgröße testen

    Firefox-Version
    100.0
    Betriebssystem
    Windows 10

    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.

    Firefox Vers.100.0 (64Bit) Adblock Plus,Kaspersky Protection,OneNote Web Clipper, Roboform Password Manager, SearchPreview,Video DownloadHelper, Download Manager (S3)

    • Hilfreichste Antwort

    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.

    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


    Firefox Vers.100.0 (64Bit) Adblock Plus,Kaspersky Protection,OneNote Web Clipper, Roboform Password Manager, SearchPreview,Video DownloadHelper, Download Manager (S3)

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

    Danke

    Firefox Vers.100.0 (64Bit) Adblock Plus,Kaspersky Protection,OneNote Web Clipper, Roboform Password Manager, SearchPreview,Video DownloadHelper, Download Manager (S3)

  • RollerMan 19. Mai 2022 um 13:07

    Hat einen Beitrag als hilfreichste Antwort ausgewählt.

    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).