When the viewport's initial zoom is not set to 1, the values for Vh and Vw

Question

When the viewport's initial zoom is not set to 1, the values for Vh and Vw

I need an overlay that covers the entire screen.

width: 100vw;
height: 100vh;

The website I'm working on is not responsive and has a fixed width of 1000px. I have set the meta tag as:

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

This loads the site at 1000px wide but uses the device viewport to enable the use of media queries and javascript for feature control.

The problem is that 100vh only equals the viewport when the pixel ratio is 1:1 and not zoomed out, making my 100vh/vw values smaller than the actual viewport size.

Is there a way to cover the viewport regardless of zoom level, while still detecting smaller screens?

It's important to note that this issue occurs specifically on mobile browsers, as mentioned by @Benjamin Solum.

https://i.sstatic.net/g1g87.png

css viewport meta viewport-units

Answer 1

Answer №1

It's interesting to note that the viewport width and height dimensions remain unchanged after zooming, as this seems to be a matter of how browsers are implemented.

While the width and height properties appear to be more closely tied to DOM elements themselves, it may be necessary for browser developers to reconsider how vw and vh are handled.

However, there could be valid reasons for maintaining the current behavior, particularly in cases where it proves useful. Finding a solution for scenarios involving zoom and non-responsive pages may therefore be challenging.

Answer 2

It's interesting to note that the viewport width and height dimensions remain unchanged after zooming, as this seems to be a matter of how browsers are implemented.

While the width and height properties appear to be more closely tied to DOM elements themselves, it may be necessary for browser developers to reconsider how vw and vh are handled.

However, there could be valid reasons for maintaining the current behavior, particularly in cases where it proves useful. Finding a solution for scenarios involving zoom and non-responsive pages may therefore be challenging.

Answer 3

Answer №2

If you want a full-screen overlay, the best way is to use absolute positioning:

.overlay {
  /* To ensure it covers the whole screen */
  background: #f00;
  /* Positioned absolutely in relation to the viewport */
  position: absolute;
  /* Set edges to extend all the way to the viewport */
  top: 0; right: 0; bottom: 0; left: 0;
}

<div class="overlay">Hi!</div>

There's no need to worry about viewport metas or anything like that when using this method.

For a fixed position that remains in place regardless of scrolling, as Benjamin Solum suggested, you can use position:fixed.

Answer 4

If you want a full-screen overlay, the best way is to use absolute positioning:

.overlay {
  /* To ensure it covers the whole screen */
  background: #f00;
  /* Positioned absolutely in relation to the viewport */
  position: absolute;
  /* Set edges to extend all the way to the viewport */
  top: 0; right: 0; bottom: 0; left: 0;
}

<div class="overlay">Hi!</div>

There's no need to worry about viewport metas or anything like that when using this method.

For a fixed position that remains in place regardless of scrolling, as Benjamin Solum suggested, you can use position:fixed.

When the viewport's initial zoom is not set to 1, the values for Vh and Vw

Answer №1

Answer №2

Similar questions

In HTML, the size and position of an <a> element cannot be altered or adjusted

Avoiding applying the Textarea Transition on Resize is crucial

Center-align the table element

Reduce the size of text using HTML and CSS

Spreading activity among react elements

Challenge with the desktop sidebar in a responsive design

Add an arrow or triangle at the tip of the line

An effective approach to automatically close an Expansion Panel in an Angular Mat when another one is opened

Issues encountered with Element clicking in Span Div CSS dropdown frame using Selenium Web Driver

The foundation gem is encountering an issue with incompatible units: 'rem' and 'px'

The div does not allow elements to be centered

Is it difficult to present certain fields in a side-by-side format?

Using Bootstrap to handle opening a link when a dropdown menu button is clicked

Utilizing Inline Placement within Email Templates

Tips for zooming out a Bootstrap 4 table

CSS not being applied to Next.js HTML pages

Creating a responsive two-column grid in Bootstrap 4.4 is a straightforward process that

Is there a method for converting HTML/CSS into an image file?

Cutting imagery to create a new design element

React Native Transparent Modal Issue: Solution Needed