Detailed explanation of the difference between device-width and width in CSS3 media queries

1.device-width

Definition: Defines the screen visible width of the output device.

Regardless of whether your web page is opened in Safari or embedded in a webview, device-width is only related to your device. If it is the same device, its value will not change.

For example, the device-width*device-height of iPhone 6 is 375*667, which has nothing to do with its DPR, etc.

2.width

Definition: Defines the width of the visible area of ​​the page in the output device.

The output is the width and height of the visible area of ​​your web page. Assuming that your web page is a mobile web page nested in a webview, the width is actually the width and height of the webview. If the width and height are different in different browsers, suppose that your page uses rem layout, and for retina screens, dpr>1, and the meta tag is set with content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no,viewport-fit=cover", then the width on your iPhone 6 will be 750px.

I use device-width and device-height more often here, because I don't need to consider the horizontal screen situation.

For example, if you want to adapt to iPhone X, and you already know the size of iPhone X (375*812), you can use the following statement:

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

Another example is the latest Samsung folding screen

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

In short, device-width will not change in a device. Its value is related to the device width. The width may be displayed differently in different layout schemes or different containers. Here I think device-width is equivalent to js's window.screen.width, and width is equivalent to js's document.body.clientWidth.

In addition, I would like to record the situation of adapting to Huawei's folding screen. Since there is no real machine at this time, I only know that the resolution of Huawei's unfolded screen is 2200*2480, and the DPR is not clear, so I don't know device-width and device-height (I can't use width to query here, the reason is related to business logic), so I chose device-aspect-ratio,

At first I wrote this in my less

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

Then the device-aspect-ratio in CSS is calculated as a decimal

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

device-aspect-ratio does not support decimals, so it cannot match

So I looked up how to prevent less from executing the result of 55/62, and found that it can be done by wrapping the attribute in quotation marks and adding a tilde in front of it, like this:

@media (device-aspect-ratio: ~"55/62") {
    /*Adaptation part*/
}

Problem solved!

However, MDN no longer recommends using device-aspect-ratio, and this attribute will be gradually abandoned. If a better solution is found, I will use an alternative.

This is the end of this article about the detailed explanation of the difference between device-width and width in CSS3 media queries. For more relevant CSS3 device-width width content, please search 123WORDPRESS.COM's previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!