title: Layout viewport css width attribute
body: <p>I read this article <a href="http://www.quirksmode.org/mobile/viewports2.html" rel="nofollow noreferrer">A tale of two viewports</a> </p>
  
  <p>In this article the author writes:</p>
  
  <p>"the CSS layout, especially percentual widths, are calculated relative to the layout viewport"</p>
  
  <p>"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)."</p>
  
  <p>I do not understand the following paragraph :</p>
  
  <p>"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"</p>
  
  <p><strong>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 ?</strong></p>
  
  <p>Thanks</p>
  
  <p><img src="https://i.stack.imgur.com/sAYRX.jpg" alt="enter image description here"></p>