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

Question

I use 100vh to center the div vertically with the line height. This site supports vh and vw support about 70%, is this a fair estimate? Can you recommend the use of viewing units in the process of creating the site? I know this is a bit subjective, I'm just looking for opinions from more experienced web developers than me.

EDIT: Thanks for logging in to everyone, I want it to look good on a mobile phone, so I think I will have to give up vh.

Answer 1

The statistics are clear, and this, in my opinion, is a fair assessment.

I think the decision should be made by you. If you want your website, hoping for the future, to use the latest and greatest technology, but realize that there are currently some flaws, then great, go for it.

If you are not ready to invest a little more in your online presence, stick to the old method, which is by no means wrong.

EDIT: When I want to create a responsive design, I start by developing Mobile Devices first and then creating the Desktop Version to make sure my viewports are working correctly, because in some cases Mobile support is not enough (especially vmax). BUT you could ask 50 guys about this, and the chances that they all say something else are very good.

Answer 2

use CSS vh and jQuery, it is 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 have managed to make vh unusable.

When you start scrolling or change the direction of scrolling, the address bar will either disappear or return; then you stop, release your finger, and the vh value will suddenly update along with any element using it, which will lead to a UX nightmare (the user does not expect resizing at the end of scrolling, changing the proportions of existing elements, re-arranging the contents, etc.) .

Answer 4

You are actually referring to your question .

It depends on which browsers you need to support.

Partial support in IE9 refers to support for "vm" instead of "vmin". Partial support in iOS7 is due to a bug in the behavior of the vh module. All other partial support refers to the fact that the "vmax" block is not supported.

This means that using viewport units may be a “bug” in iOS7. I would not recommend using view units, but use:

• Pixels: e.g. height: 500px;
• Percentage: for example. height: 50%;

These values ​​are widely supported and will give the best results.

Answer 5

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