JSFiddle - React, Tailwind, and code Playground

by dougneiner

HTML

<p>How does your browser rank with <code>vh</code>/<code>vw</code> support? </p>

<p id="viewport-sizes">Viewport Units <code>vh</code> and <code>vw</code></p>

<p><small><em>(Note: If either unit fails it will report a fail to keep the test to a single test. For individual support, see <a href="http://jsfiddle.net/dougneiner/CMFSv/3/show">this fiddle</a></em></small></p>

CSS

.pass { color: green }
.fail { color: red }

/* These won't show up in browsers that don't support pseudo elements, but the color will still show the support level */
.pass:after,
.fail:after {
    font-weight: bold;
    font-size: 0.75em;
}

.pass:after {
    content: " PASS";
}

.fail:after {
    content: " FAIL";
}


body { font-family: Helvetica, Arial, sans-serif }

JavaScript

var viewportUnitSupport = (function () {
    var div = document.createElement( 'div' );
    try {
        /* Try catch for < IE9 - otherwise it throws an argument error */
        div.style.height = "50vh";
        div.style.width  = "50vw";
        return ( div.style.width === "50vw" ) && ( div.style.height === "50vh" );
    } catch ( e ) {}
    return; false
})();

document.getElementById('viewport-sizes').className = viewportUnitSupport ? "pass" : "fail";