width =设备宽度是否与初始比例= 1一致？

Question

Researching viewport behaviour, I've hit a bit of a snag in understanding the meta viewport declaration.

I see width=device-width and initial-scale=1 used together a lot but, as far as I can tell, the latter implies the former.

MDN also mentions that defining both a width and initial-scale=1 will result in the width acting as a minimum viewport width. If this is the case then is there any need to define the width as device-width ? Surely the initial-scale can't be 1 with any layout viewport smaller than the device-width anyway.

Am I missing something or is defining the width as device-width redundant here?

Thanks

Answer 1

Using both width=device-width and initial-scale=1 ensure cross browser/device compatibility. For example, for iOS devices, initial-scale=1 is needed for your page to pick up on orientation change of the device as width=device-width will not. Using both ensure maximum effectiveness using the meta viewport tag.

Answer 2

The 2 tags are not the same.

The ' width=device ' tag tells the browser to use the device's real width as the 100% width of the screen. If you omit it, a mobile device will simulate as if it has higher resolution and your content will not be stretched to full width.

The initial-scale is the zoom level on first load. If it is set to 1, along with ' width=device ', then the content will not be zoomed out or in. You will also not be able to zoom out more than the initial scale (but you will still be able to zoom in). That will be as if you set 'minimum-scale' to 1 as well.

There is also a ' maximum-scale ' and if you set it to 1 as well, the user will not be able to zoom in more than the initial scale.

This is an example of how you can create an 'app-like' feeling, where the content uses the device's width in a 1:1 ratio.

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

Hope this helps!