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()，我发现将问题分开会更好。 Modernizr中已经存在calc()支持的单独检查（仅在默认配置中），可以在此处找到：How can I check if CSS calc() is available using JavaScript?

也可能值得注意的是，视口单元还不是widely supported。支持calc和视口单元但未组合的情况非常罕见。

使用modernizr来检测vh，vw with calc

1 个答案: