2 javascript css3 modernizr viewport-units browser-feature-detection
我实际上有一个问题我试图解决3周后.我试图测试对vw单元的支持并在浏览器不支持单元时提供单独的样式表我阅读了modernizr教程并熟悉modernizr css检测但是测试vh单位(视口相对单位)是我在网上找不到的东西.
所以基本上:
场景1:浏览器支持vw单元然后提供样式表A.
场景2:浏览器不支持它然后提供样式表B.
我确实发现有一个名为Modernizr.cssvwunit的非核心检测,但老实说我不知道在这种情况下从哪里开始或如何使用.
如果你帮助我扩展我的知识会很棒.此外,如果它不是太费力,我可以研究一个例子的jsfiddle将是非常有帮助的.
此致
马库斯
编辑:为什么它只触发else语句？ http://jsfiddle.net/5saCL/10
<script>
if (Modernizr.cssvwunit) {
alert("This browser supports VW Units!");
} else {
alert("This browser does not support VW Units!");
}
</script>
如果您查看本教程http://www.developphp.com/view.php?tid=1253,您将了解如何使用JavasSript更改CSS样式.
您只需编辑一点脚本以符合您的要求:
<!DOCTYPE html>
<html>
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<script type="text/javascript">
if (Modernizr.cssvwunit) {
document.getElementById('pagestyle').setAttribute('href', "styleVW.css");
} else {
document.getElementById('pagestyle').setAttribute('href', "style.css");
}
</script>
</head>
<body>
<h2>Javascript Change StyleSheet Without Page Reload</h2>
<!-- no buttons needed -->
</body>
</html>
这应该工作.