Eine kurze Diskussion über den Unterschied zwischen CSS3-Gerätebreite und Breite

In diesem Artikel erfahren Sie mehr über den Unterschied zwischen Gerätebreite und Breite bei CSS-Medienabfragen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

【Empfohlenes Tutorial: CSS-Video-Tutorial】

1.device-width

Definition: Definieren Sie die sichtbare Breite des Bildschirms des Ausgabegeräts.

Unabhängig davon, ob Ihre Webseite in Safari geöffnet oder in eine Webansicht eingebettet ist, hängt die Gerätebreite nur von Ihrem Gerät ab. Wenn es sich um dasselbe Gerät handelt, ändert sich der Wert nicht.

Zum Beispiel beträgt die Gerätebreite * Gerätehöhe des iPhone6 ​​375 * 667, was nichts mit dem DPR usw. zu tun hat.

2.width

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

Die Ausgabe ist die Breite und Höhe des sichtbaren Bereichs Ihrer Webseite. Unter der Annahme, dass es sich bei Ihrer Webseite um eine in einer Webansicht verschachtelte Seite handelt, entspricht die Breite tatsächlich der Breite und Höhe der Webansicht Browser, Breite und Höhe können unterschiedlich sein. Wenn Ihre Seite ein Rem-Layout verwendet und für Retina-Bildschirme, ist dpr>1, content="width=device-width, initial-scale=0.5, Minimum-scale= im eingestellt Meta-Tag 0,5, Maximum-Scale=0,5, User-Scalable=No, Viewport-Fit=Cover“, die Breite auf Ihrem iPhone 6 beträgt 750 Pixel.

Ich verwende hier mehr Gerätebreite und Gerätehöhe, da die horizontale Bildschirmsituation nicht berücksichtigt werden muss.

Wenn Sie sich beispielsweise an iphoneX anpassen, kennen Sie bereits die Größe von iphoneX (375 * 812). die folgende Aussage:

/*iphone x*/
@media only screen and (device-width:375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
    .foriphoneX()
}

Ein weiteres Beispiel ist der neueste Samsung-Faltbildschirm

@media screen and (device-width: 586px) and (device-height: 820px){
    html{
        font-size: 110px !important;
    }
}

Kurz gesagt, die Gerätebreite ändert sich in einem Gerät nicht. Die Breite ändert sich in verschiedenen Layoutschemata unterschiedlich Die Anzeige im Container kann unterschiedlich sein. Hier entspricht die Gerätebreite meiner Meinung nach der window.screen.width von js und die Breite entspricht der document.body.clientWidth von js.

Nehmen Sie auch meine Adaption des Huawei-Faltbildschirms auf. Da es derzeit kein echtes Telefon gibt, weiß ich nur, dass die Auflösung von Huawei im aufgeklappten Zustand 2200 * 2480 beträgt. Der DPR ist noch nicht klar das Gerät. -width und device-height (Ich kann die Breite hier nicht für die Abfrage verwenden, da es mit der Geschäftslogik zusammenhängt), also habe ich „device-aspect-ratio“ gewählt

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

@media (device-aspect-ratio: 55/62) {
    /*适配*/
}

Geräte-Seitenverhältnis unterstützt keine Dezimalzahlen, daher kann es nicht übereinstimmen.

Also habe ich überprüft, wie man verhindern kann, dass less das 55/62-Ergebnis ausführt, und habe es gefunden Setzen Sie die Attribute einfach in Anführungszeichen und fügen Sie davor eine Tilde ein, etwa so:

@media (device-aspect-ratio: 0.887097) {
    /*适配*/
}

Problem gelöst!

Allerdings wird das Geräte-Seitenverhältnis auf MDN nicht mehr empfohlen. Wenn ich eine bessere Lösung finde, werde ich eine Alternative verwenden.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über den Unterschied zwischen CSS3-Gerätebreite und Breite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!