Detaillierte Erklärung des Unterschieds zwischen Gerätebreite und Breite in CSS3-Medienabfragen

1.Gerätebreite

Definition: Definiert die sichtbare Bildschirmbreite des Ausgabegeräts.

Unabhängig davon, ob Ihre Webseite in Safari geöffnet oder in eine Webansicht eingebettet wird, bezieht sich die Gerätebreite nur auf Ihr Gerät. Wenn es dasselbe Gerät ist, ändert sich der Wert nicht.

Beispielsweise beträgt die Gerätebreite x Gerätehöhe des iPhone 6 375 x 667, was nichts mit seinem DPR usw. zu tun hat.

2.Breite

Definition: Definiert die Breite des sichtbaren Bereichs der Seite im Ausgabegerät.

Die Ausgabe ist die Breite und Höhe des sichtbaren Bereichs Ihrer Webseite. Angenommen, Ihre Webseite ist eine mobile Webseite, die in einer Webansicht verschachtelt ist, dann ist die Breite tatsächlich die Breite und Höhe der Webansicht. Wenn die Breite und Höhe in verschiedenen Browsern unterschiedlich sind, nehmen Sie an, dass Ihre Seite REM-Layout verwendet und für Retina-Bildschirme dpr>1 ist und das Meta-Tag mit content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no,viewport-fit=cover" festgelegt ist, dann beträgt die Breite auf Ihrem iPhone 6 750 Pixel.

Ich verwende hier häufiger die Gerätebreite und Gerätehöhe, da ich dabei keine Rücksicht auf die horizontale Bildschirmsituation nehmen muss.

Wenn Sie es beispielsweise an das iPhone X anpassen möchten und die Größe des iPhone X (375 x 812) bereits kennen, können Sie die folgende Anweisung verwenden:

/*iPhone X*/
@media only screen und (Gerätebreite:375px) und (Gerätehöhe:812px) und (-webkit-device-pixel-ratio:3) {
    .füriphoneX()
}

Ein weiteres Beispiel ist der neueste Faltbildschirm von Samsung

@media screen und (Gerätebreite: 586px) und (Gerätehöhe: 820px) {
    html{
        Schriftgröße: 110px !wichtig;
    }
}

Kurz gesagt, die Gerätebreite ändert sich in einem Gerät nicht. Ihr Wert hängt von der Gerätebreite ab. Die Breite kann in verschiedenen Layoutschemata oder Containern unterschiedlich angezeigt werden. Hier denke ich, dass die Gerätebreite der window.screen.width von js entspricht und die Breite der document.body.clientWidth von js entspricht.

Darüber hinaus möchte ich die Situation der Anpassung an den Klappbildschirm von Huawei aufzeichnen. Da es derzeit keine echte Maschine gibt, weiß ich nur, dass die Auflösung des aufgeklappten Bildschirms von Huawei 2200 x 2480 beträgt und der DPR nicht klar ist. Daher kenne ich die Gerätebreite und -höhe nicht (ich kann die Breite hier nicht zum Abfragen verwenden, der Grund hängt mit der Geschäftslogik zusammen), also habe ich das Geräte-Seitenverhältnis gewählt.

Zuerst schrieb ich dies in meinem weniger

@media (Geräte-Seitenverhältnis: 55/62) {
    /*Anpassung*/
}    

Dann wird das Geräte-Seitenverhältnis in CSS als Dezimalzahl berechnet

@media (Geräte-Seitenverhältnis: 0,887097) {
    /*Anpassung*/
}  

Das Geräte-Aspektverhältnis unterstützt keine Dezimalstellen und kann daher nicht übereinstimmen.

Also habe ich nachgeschlagen, wie man Less daran hindern kann, das Ergebnis 55/62 auszuführen, und habe herausgefunden, dass dies dadurch erreicht werden kann, dass man das Attribut in Anführungszeichen setzt und davor eine Tilde hinzufügt, und zwar wie folgt:

@media (Geräte-Seitenverhältnis: ~"55/62") {
    /*Anpassungsteil*/
}

Problem gelöst!

MDN empfiehlt jedoch nicht mehr die Verwendung des Geräteaspektverhältnisses und dieses Attribut wird nach und nach aufgegeben. Wenn eine bessere Lösung gefunden wird, werde ich eine Alternative verwenden.

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung des Unterschieds zwischen Gerätebreite und Breite in CSS3-Medienabfragen. Weitere relevante Inhalte zur Gerätebreite von CSS3 finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!