CODEWITHSUNDEEP
htmlcssmobileresponsive-designviewport
ProgNet
ProgNet

Reputation: 725

Layout viewport css width attribute

I read this article A tale of two viewports

In this article the author writes:

"the CSS layout, especially percentual widths, are calculated relative to the layout viewport"

"The point is: browsers have chosen their dimensions of the layout viewport such that it completely covers the screen in fully zoomed-out mode (and is thus equal to the visual viewport)."

I do not understand the following paragraph :

"Now what you could try is setting html {width: 320px}. Now the element shrinks, and with it all other elements, which now take 100% of 320px. This works when the user zooms in, but not initially, when the user is confronted with a zoomed-out page that mostly contains nothing"

If the screen size of device is around 320 pixels so is the layout viewport and if the css width for the html element is set to 320px why does element shrinks ?

Thanks

enter image description here

Upvotes: 1

Views: 2800

Answers (1)

Bastian Rang
Bastian Rang

Reputation: 2187

If the screen size of device is around 320 pixels so is the layout viewport and if the css width for the html element is set to 320px why does element shrinks ?

you have a default viewport of ca 980px on your mobile device, if you do not reset it with the meta-tag <meta name="viewport" content="width=device-width"> (or any addition to that).

A mobile browser auto scales your page so the size of 980px fits the screen, making your 320px only a third of that.

Upvotes: 4

Related Questions