CODEWITHSUNDEEP
htmlcss
Darren Gates
Darren Gates

Reputation: 611

How do I force "vw" units to obey the html meta "viewport" tag width setting?

Currently, when I use CSS "vw" units (viewport width), the browser seems to always use the browser viewport, regardless of what the meta viewport is. For example, please see this jsfiddle:

https://jsfiddle.net/darrengates/ywvc6x51/

In this example, I have:

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

In the css, if I specify:

.vw-75 {
    width: 100vw;
}

Then, I'm hoping to force any content with the "vw-75" class to be 75px, since the meta viewport is set to "width=75". Is there any way that I can force "vw" units to obey the meta value?

For those wondering "why would you ever want to do this?":

I have a website that uses VW units all over the place (for font sizes, div sizes, border sizes, etc.). Due to the requirements of the website, I want the maximum viewable area to be different based on browser, device, language, etc. In other words, the viewable content area might be anywhere from about 500px to 2000px. Rather than change all of the vw values to % values, or add a ton of new media queries (a huge task due to the site size), I'm hoping to just dynamically set the meta viewport.

Upvotes: 0

Views: 937

Answers (1)

Blazemonger
Blazemonger

Reputation: 92983

Try removing , initial-scale=1 from your meta tag:

<meta name="viewport" content="width=75">

The problem may simply be that jsfiddle doesn't apply the <meta> tag.

Upvotes: 1

Related Questions