所以我遇到了一个问题,浏览器与 vh、vw 单位兼容并且与 calc() 兼容,但与 calc 中的 vh、vw 单位不兼容。所以我不确定如何使用 modernizr 来测试该特定案例。
对此有什么想法吗?非常感谢!
最佳答案
您可以在 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)上测试。我不确定哪些浏览器确实支持和不支持这一点,但您可以运行以下 fiddle 来测试它:http://jsfiddle.net/3dthsgv5/6/
不过,这并不仅仅针对 calc()
进行测试,我发现最好将关注点分开。对 calc()
支持的单独检查已经存在于 Modernizr 中(只是不在默认配置中)并且可以在这里找到:How can I check if CSS calc() is available using JavaScript?
还可能值得注意的是,视口(viewport)单位不是 widely supported然而。同时支持 calc
和视口(viewport)单位但不组合的情况非常罕见。
关于css - 使用 modernizr 检测 vh,vw 和 calc,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27592524/