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.

Cope

create a new question for that please; and look my post i just added a part about mobile devices – Brigettebrigg

Right, I'll edit that out. – Cope

caniuse.com/#search=vh – Torpedoman

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.

Brigettebrigg

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;}

Tindall

that seems like a pain – Yabber

Life is pain. Anyone who says differently is selling something. – Twaddle

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).

Panegyric

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.

Underplay

pixels and percentage cannot always create what vm offers. – Smoky

very true, currently I am not able to use % even where i needed vh – Piecedyed

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.

Extremely

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.

Nierman