尝试使用Modernizr仅为触摸设备加载样式表

Question

尝试使用Modernizr仅为触摸设备加载样式表

3

我听说Modernizr的触摸测试是测试页面所在设备是否具有触摸或多点触控功能的最佳方法之一。

我正在尝试使用它（触摸测试）以及modernizr的加载函数，仅在设备具有触摸功能时加载样式表。

然而，我的代码似乎无法正常工作。我做错了什么？

<script type="text/javascript">
Modernizr.load({
    test: Modernizr.touch,
    yep: 'assets/css/touch.css'
});
</script>

更新：抱歉，我应该澄清一下不工作的含义：当我在我的多点触控智能手机上访问页面时，样式没有生效。我已经将样式应用在正常的样式表中，并且它们起作用，但是当我将它们切换到touch.css并尝试通过Modernizr有条件地加载它们时，它就不起作用。我的Modernizr副本包括yepnope和touch测试，因为我在其他情况下使用了它们并且它们是有效的。

- IMUXIxD

"不起作用" 是什么意思？你的控制台是否出现错误？你构建的 Modernizr 是否包括 __yepnope__？ - Evan Davis

@Mathletics，我已经更新了问题并回答了你的问题。 - IMUXIxD

2个回答

2

另一种解决方法是不为触摸设备加载额外的样式表，而是将类添加到 <body> 中。

像这样：

if(Modernizr.touch) {
    $('body').addClass('touch');
}

然后在你的样式表类名前加上.touch：

a:hover {
    color: red;
}


a, .touch a:hover {
    color: blue;
}

当触摸和非触摸设备的CSS存在许多且重要差异时，加载额外样式表是一个好主意。在这种情况下，仅使用一个样式表不是一个好主意，因为它将变得相当大。如果只有轻微的差异，请向body（或其他元素）添加.touch类是更好的选择，我认为。

- Sebastian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Peter Herdenborg · Accepted Answer

你的脚本块看起来是正确的，所以问题一定是其他方面引起的。既然你确定你的Modernzr构建包含Yepnope，请看以下几点猜测：

1.你的脚本块在包含Modernzr的脚本标签之前。 2.CSS路径错误。

我建议首先添加一个回调函数callback: function(){ alert('loaded!'); }到.load()语句中，看看是否发生了这种情况。如果没有，我会将Modernzr.touch替换为true并在桌面浏览器上测试是否有JavaScript错误发生。