2

As far as I was aware, vh and vw used the height and width of the visual viewport - the size of the browser window, and divided it by 100. Therefore, if you defined an element to be 100vw wide, it will always span the entire browser window, what MDN calls the visual viewport.

When working on my website, I found that an element set to 100vw is only taking up a portion of the screen, and that this is only visible on mobile devices - the error is absent until I open the chrome device toolbar.

Screenshot of Website and Error

The dark grey <section> elements are set to height: 100vh; width 100vw;, and I also have 

html,body {
    height:auto;
    width:100vw;
    margin:0;
    padding:0;
}

I have tried the website on my phone and the error is still present, but it is not present on a resized chrome window. What have I missed?

Live link

Deep
  • 920
  • 8
  • 22

1 Answers1

1

Thanks to Temani Afif for pointing me in the right direction. From MDN:

Narrow screen devices (e.g. mobiles) render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page. For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space.

This is done because many pages are not mobile optimized, and break (or at least look bad) when rendered at a small viewport width. This virtual viewport is a way to make non-mobile-optimized sites in general look better on narrow screen devices.

In order to prevent this, this meta tag is used:

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

This sets the viewport to be fixed to the device width.

Deep
  • 920
  • 8
  • 22