CSS: Are view height (vh) and view width (vw) units widely supported?

Question

I'm using 100vh to center a div vertically with line-height. This site puts support for vh and vw at around 70%, is that a fair assessment? Would you recommend using viewport units when building a site? I know this is a bit subjective, I'm just looking for opinions from more experienced web developers than I.

EDIT: Thanks for the input everyone, I do want it to look good on mobile, so I guess I'll have to forgo vh.

Answer 1

The statistic is clearly and it is a fair assessment, in my point of view.

I think the decision has to be made by you. If you want to future-proof your website using the latest greatest technology, but are aware that there are currently some downfalls, then great, go for it.

If you are not prepared to invest a little more into your online presence, then stick to the old way, which is in no means wrong.

EDIT: When I want to create a responsive design I start developing for Mobile Devices first and then create the Desktop Version, to ensure that my viewports all work correctly, since the Mobile support is lacking at some points(especially vmax). BUT about this you could ask 50 guys and the chances that they all will say something else are pretty good.

Answer 2

use both CSS vh and jQuery, it's safer.
jQuery example:

var clientHeight = $( window ).height();
  $('.element').css('height', clientHeight);

and CSS:

.element {height: 100vh;}

Answer 3

Viewport units are great but most mobile browser vendors managed to make vh unusable in practice.

When you start scrolling or change scrolling direction, the address bar will either disappear or come back; then you stop, release your finger and the vh value will suddenly be updated alongside any element using it resulting in a UX nightmare (user not expecting anything to resize at the end of scrolling, changing proportions of existing elements, re-layout of content, etc).

Answer 4

The page you have linked to answers your question really.

It depends what browsers you need to support.

Partial support in IE9 refers to supporting "vm" instead of "vmin". Partial support in iOS7 is due to buggy behavior of the vh unit. All other partial support refers to not supporting the "vmax" unit.

This states that using viewport units could be 'buggy' in iOS7. I wouldn't recommend using viewport units, but instead use:

• Pixles : e.g. height: 500px;
• Percentage : e.g. height: 50%;

These values are widely supported and will produce the best results.

Answer 5

Well, you can see it's already there for desktop browsers, and support on mobile devices is quite limited. So it actually depends on whether you want to create a site that looks good on computers, or a more compatible pixel-based site that works on phones too.

Answer 6

Here is a nice simple JS script I use to make sure vh units will work on all browsers (A few months ago I saw this and been using it since then)

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

// We listen to the resize event
window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

I believe the same approach could be used for other purposes as well.