如何检测浏览器是否支持视口单位，如 vh 或 dvh？

Question

I'm planning to make very responsive website. For this, I'm including external stylesheet currently.

But I want to include it for only those browsers which supports viewport units such as vw.

So, how could I detect for browser that it supports or not.

Please note: I don't want to include modernizer.

Answer 1

This is the code that Modernizr uses:

  testStyles('#modernizr { width: 50vw; }', function(elem) {
    var width = parseInt(window.innerWidth / 2, 10);
    var compStyle = parseInt((window.getComputedStyle ?
                              getComputedStyle(elem, null) :
                              elem.currentStyle).width, 10);

    Modernizr.addTest('cssvwunit', compStyle == width);
  });

So you can do something similar. Just follow these steps:

1. Set an element with width in vw .
2. Check the computed width of the element to match the viewport's width.
3. If both are same, then your browser supports vw and vh !

Snippet coming soon...

 $(function () { elemWidth = parseInt(getComputedStyle(document.querySelector("#checkVw"), null).width, 10); halfWidth = parseInt(window.innerWidth / 2, 10); $("#checkVw").html("Your browser" + ((elemWidth == halfWidth) ? "" : "does not ") + " support VW and VH"); }); 

 #checkVw { width: 50vw; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="checkVw"></div> 

I checked with IE 7 and it screwed up! ;)

Answer 2

In modern browsers you can use @supports in CSS to check support for various things, including viewport units.

Wrap any styles you wish in @supports much like @media queries:

@supports(height: 100vh) {
 .myClass { height: 100vh; }
}

This example tests to see if a browser supports units like vh or dvh or a non-existing type of madeup (ie a type that your browser does not know about):

 #supportVH::after, #supportDVH:after, #supportMadeUp:after { content: "❌ NO"; color: white; background-color: darkred; display: block; margin: 1em 0; padding: 1em; border: 1px solid #ccc; } @supports(height: 100vh) { #supportVH::after { content: "✅ YES"; background-color: lightgreen; } } @supports(height: 100dvh) { #supportDVH:after { content: "✅ YES"; background-color: lightgreen; } } @supports(height: 100madeup) { #supportMadeUp:after { content: "✅ YES"; background-color: lightgreen; } }

 <div id="supportVH">Does your browser support <code>vh</code>?</div> <div id="supportDVH">Does your browser support <code>dvh</code>?</div> <div id="supportMadeUp">Does your browser support <code>madeup</code>?</div>

In JavaScript you can use it the same way with CSS.supports() :

const supportsDvh = CSS.supports('height: 100dvh');