Chrome-Dev-Tools - Device-Toolbar - Probleme mit Auflösung

[Sithys]

Moin zusammen,
versuche gerade ein bisschen an der mobilen Version einer Seite zu arbeiten. Dazu wollt ich die Dev-Tools Device-Toolbar von Chrome nutzen. Folgendes hab ich eingestellt:

Mein Media-Query dazu sieht so aus:

@media only screen
and (min-device-width : 320px)
and (max-device-height : 568px)
and (orientation : portrait) {

    html {
        width: 320px;
        height: 568px;
    }

    body {
        width: 100%;
        height: 100%;
    }
}

und beim Hovern meines HTML zeigt Chrome mir aber:

das an. Kapier ich nicht... wenn mein HTML den vollen Bereich füllen soll, muss ich 375 x 667px angeben, was aber nicht mehr dem iPhone 5 entspricht sondern dem iPhone 6.

Vielleicht steh ich gerade auf dem Schlauch... aber derzeit weiß ich nicht weiter.

 

[Jesterfox]

Naja... wenn du bei html 320px Breite angibst kriegst du auch 320px Breite... wenn du immer die volle Breite haben willst müsste das dort auch 100% sein.

 

[Sithys]

Wenn ich in der Toolbar oben Einstelle, dass der "Monitor" 320px breit sein soll und mein HTML 320px breit ist, dann passt doch was nicht zusammen, wenn es eben nicht den gesamten Bereich abdeckt oder?

 

[Jesterfox]

Ok, das ist mir gar nicht aufgefallen... da passt tatsächlich was mit der Vorschau nicht.

 

[Bagbag]

Vergleich das mal noch mit dem Firefox. Könnte mir auch vorstellen, dass es stimmt, da man evtl. noch unter "nativen Pixel" und "CSS Pixel" unterscheiden muss (Stichwörter DPI, Skalierung).

So sagt mir screen.width bspw. 2560, obwohl ich 3840 (native) Pixel habe. Habe jedoch 150% Skalierung und 3840 / 1.5 ergibt nunmal 2560.

Und unter anderem genau es dem Grund arbeitet man nicht mehr mit px, sondern mit vw, vh, em, rem, ch, ex, lh.

 

[Sparta8]

Ist dir der Unterschied zwischen width und device-width bewusst und dein CSS verwendet absichtlich device-with?

z.B.: https://www.sitepoint.com/media-queries-width-vs-device-width/