Was ist der Unterschied zwischen Gerätebreite und Breite in CSS?

1. Gerätebreite

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.

(Empfohlenes Tutorial: CSS-Tutorial)

2. Breite

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. Wenn es sich bei Ihrer Webseite um eine in einer Webansicht verschachtelte mobile Webseite handelt, entspricht die Breite tatsächlich der Breite und Höhe der Webansicht In verschiedenen Browsern können Breite und Höhe auch unterschiedlich sein. Wenn Ihre Seite das Rem-Layout verwendet und für Retina-Bildschirme, ist dpr>1, content="width=device-width, initial-scale=0.5 im Meta-Tag festgelegt . Minimum-Scale=0,5, Maximum-Scale=0,5, User-Scalable=Nein, 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 iphoneX bereits ( 375 *812) können Sie die folgende Anweisung verwenden:

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

Kurz gesagt, die Gerätebreite ändert sich nicht in verschiedenen Layoutschemata oder in der Anzeige im Container kann unterschiedlich sein. Hier denke ich, dass die Gerätebreite der window.screen.width von js und die Breite der document.body.clientWidth von js entspricht.

Nehmen Sie auch meine Anpassung 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 und der DPR noch nicht klar ist, also habe ich Ich kenne die Gerätebreite und die Gerätehöhe nicht (ich kann die Breite hier nicht für die Abfrage verwenden, der Grund hängt mit der Geschäftslogik zusammen), also habe ich das Geräteseitenverhältnis gewählt.

Zuerst war ich es in meinem weniger ist es so geschrieben

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

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

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

Das Geräte-Seitenverhältnis unterstützt keine Dezimalzahlen und kann daher nicht übereinstimmen

Also habe ich die Ergebnisse überprüft, wie man verhindern kann, dass less 55/62 ausführt, und festgestellt, dass es ausreicht, das Attribut in Anführungszeichen zu setzen und eine Tilde davor hinzuzufügen, etwa so:

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

Problem gelöst!

Das Geräte-Seitenverhältnis wird jedoch auf MDN nicht mehr empfohlen und dieses Attribut wird aufgegeben.

Empfohlene verwandte Video-Tutorials: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Gerätebreite und Breite in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!