css - 使用modernizr检测vh，vw with calc

Question

所以我遇到了一个问题，浏览器与 vh、vw 单位兼容并与 calc() 兼容，但与 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()支持检查（只是不在默认配置中），可以在此处找到：如何检查 CSS calc() 是否可以使用 JavaScript？

还可能值得注意的是，视口单元尚未得到广泛支持。同时calc支持和视口单元但不组合的情况非常罕见。