Search code examples
cssviewportmetaviewport-units

Vh and vw when viewport initial-zoom does not equal 1

I'm looking for an overlay to take up the entire screen.

width: 100vw;
height: 100vh;

The site I'm working on is not responsive and is set at 1000px wide. I have the meta:

<meta name="viewport" content="width=device-width" />

set to load the site so it appears 1000px wide but use the device viewport as the vh/vw unit so that I can use media queries and javascript to remove/initialize/not initialize certain features.

The issue is that 100vh equals the viewport when the pixel ratio is 1:1 and not zoomed out therefore my 100vh/vw is much smaller than the physical viewport.

Is there a way to flood the viewport no matter what the scale/zoom level while retaining the ability to detect smaller screens?

As pointed out by @Benjamin Solum I should add that the issue arises on mobile browsers.

enter image description here

Solution

  • To cover the entire screen, use absolute positioning:

    .overlay {
  /* For visibility */
  background: #f00;
  /* Position absolutely relative to viewport */
  position: absolute;
  /* Set edges to go all the way out to the viewport */
  top: 0; right: 0; bottom: 0; left: 0;
}
    <div class="overlay">Hi!</div>

    You don't need to mess with viewport metas or anything thing like that this way.

    As Benjamin Solum said, you can make it position fixed if you want it to remain in the same position regardless of scrolling.