使用modernizr来检测vh,vw with calc

Question

所以我遇到了一个问题,浏览器与vh,vw单元兼容并且与calc()兼容,BUT与calc中的vh,vw单元不兼容.所以我不确定如何使用modernizr来测试该特定情况.

有什么想法吗？非常感谢!

Answer 1

您可以在Modernizr中添加自定义测试,以便为您检查:

Modernizr.addTest('calcviewportunits', function(){
    var computedHeight, 
        div = document.createElement('div');

    div.style.height = 'calc(10vh + 10vw)';
    document.body.appendChild(div);
    computedHeight = window.getComputedStyle(div).height;
    document.body.removeChild(div);

    return computedHeight !== "0px";
});

在Chrome 26(返回false)和41(返回true)上测试.我不确定哪些浏览器确实做了,不支持这个,但你可以运行以下小提琴来测试它:http://jsfiddle.net/3dthsgv5/6/

这不会测试calc(),我觉得最好分开关注点.calc()在Modernizr中已经存在单独的支持检查(仅在默认配置中),可以在此处找到:如何使用JavaScript检查CSS calc()是否可用？

也许值得注意的是,视口单元尚未得到广泛支持.calc支持但不支持视口单元和视口单元的情况非常罕见.