使用modernizr检测vh,vw with calc
Posted
技术标签:
【中文标题】使用modernizr检测vh,vw with calc【英文标题】:using modernizr to detect vh, vw with calc 【发布时间】:2015-02-19 22:51:20 【问题描述】:所以我遇到了一个问题,浏览器与 vh、vw 单位兼容并与 calc() 兼容,但与 calc 中的 vh、vw 单位不兼容。所以我不确定如何使用modernizr 来测试那个特定的案例。
对此有什么想法吗?非常感谢!
【问题讨论】:
【参考方案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的主要内容,如果未能解决你的问题,请参考以下文章