What is the difference between device-width and width in css

1. device-width

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

No matter whether your webpage is opened in Safari or embedded in a webview, device-width is only related to your device. If it is the same device, then its value will not change.

For example, the device-width*device-height of iphone6 ​​is 375*667, which has nothing to do with its dpr, etc.

(Recommended tutorial: CSS tutorial)

2. width

Definition: Define 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 webpage. Assuming that your webpage is a mobile webpage nested in a webview, width is actually the width and height of the webview. If it is in different browsers , width and height may also be different, and if your page uses rem layout, and for retina screens, dpr>1, content="width=device-width, initial-scale=0.5, is set in the meta tag. minimum-scale=0.5, maximum-scale=0.5, user-scalable=no,viewport-fit=cover", the width size on your iPhone 6 will be 750px.

I use device-width and device-height more here, because there is no need to consider the horizontal screen situation

For example, if you adapt to iphoneX, you already know iphoneX ( 375*812), you can use the following statement:

@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. Width changes in different layout plans or different The display in the container may be different. Here I think device-width is equivalent to the window.screen.width of js, and width is equivalent to the document.body.clientWidth of js.

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

At first I was in my less It is written like this

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

Then device-aspect-ratio in css is calculated as a decimal

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

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

So I checked how to prevent less from executing 55/62 results, and found that it is enough to wrap the attribute in quotes and add a tilde in front of it, like this:

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

Problem solved!

However, device-aspect-ratio is no longer recommended on MDN, and this attribute will be abandoned.

Recommended related video tutorials: css video tutorial

The above is the detailed content of What is the difference between device-width and width in css. For more information, please follow other related articles on the PHP Chinese website!