CSS viewport units current support

Question

I'm planing to build an one page scroll site using some divs with heights and font sizes on viewport units (vh, vw).

I'm aware of some support problems on older browsers, but I'm not interested in increasing the page load using vminpoly since I found it to bulky and I'm not crazy about very outdated browsers support.

By the other side, Buggyfill could be a smaller but partial solution for cross browser compatibility.

Another solution could be testing for support as written on css-tricks and later using jQuery for resizing the affected elements:

var testEl = $("#vw-test");

testEl.css({
  width: "100vw"
});

if (testEl.width() == window.innerWidth) {
   // do nothing
} else {
   // resize divs with jQuery
};

What would be your approach for supporting viewport units?

Do you know another simple solution for a reasonable browser compatibility?

Buggyfill does not make those units work on older browsers, it just fixes a problem in Safari Mobile’s _existing_ implementation of these units. And if you’re saying you are “not crazy” about supporting outdated browsers, then [current support](http://caniuse.com/viewport-units) is broad enough I’d say. (Except for maybe Opera before Blink.) — CBroe, Aug 08 '14 at 17:40

score 0 · Answer 1 · answered Nov 14 '16 at 07:56

For viewport-relative font-size, try this plugin: https://github.com/draashurx/viewportfontsize/tree/master

Simple and clear usage example:

$('p').vw(10); // Equals font-size: 10vw
$('p').vh(5);  // Equals font-size: 5vh

However, this plugin does not support width or height property. It is only applicable for font-size property at the moment.

score -1 · Answer 2 · edited May 23 '17 at 12:13

This seems like an opinion-based question, it's also not exactly clear what is it that you're asking.

As far as usage within font-size goes, I think the best and only way to actually use the viewport units is to hide them behind media queries of minimum height and length, expressed in em, to ensure you don't get negative magnification from these viewport units.

Probably the most useful and appropriate use of the viewport units, as far as web-accessibility is concerned, would be on simple one page credit-card-style business-card contact information pages. (Otherwise, if you'll be using it on long-text articles etc, then you risk ruining the experience of people who specifically got larger monitors to be able to see more text at the same time.)

How to properly use css-values viewport-relative-lengths?

/* automatically magnify business-card-style page in large viewports */
/* please don't use this unless you yourself posses a large monitor! */
@media (min-width: 50em) and (min-height: 64em) {
  /* start with 100% at 50em, we'll have 200% magnification when at 100em */
  html {font-size: 2vmin;}
}

CSS viewport units current support

2 Answers2