3

我听说 Modernizr 的触控测试是测试正在查看页面的设备是否启用触控或多点触控的最佳方法之一。

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

但是，我的代码似乎不起作用。我究竟做错了什么？

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

更新：对不起，我应该澄清什么是无效的：当我在我的多点触控智能手机上访问页面时，样式没有生效。我在普通样式表中应用了样式并且它们生效，但是当我将它们切换到 touch.css 并尝试使用 Modernizr 有条件地加载它时，它不起作用。我的 Modernizr 副本确实包括 yepnope 和触摸测试，因为我在它们工作的其他情况下都使用它们。

4

2 回答 2

3

您的脚本块看起来正确，所以问题一定是别的。由于您确定您的 Modernzr 构建包含 Yepnope，因此这里有一些猜测：

  1. 您的脚本块位于包括 Modernzr 在内的脚本标记之前
  2. CSS的路径错误

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

于 2013-03-31T22:38:28.673 回答
2

另一种解决方案是不为支持触摸的设备加载额外的样式表，而是向其中添加一个类<body>。

像这样：

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

然后在您的样式表类前面加上.touch：

a:hover {
    color: red;
}


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

当触摸和非触摸设备的 CSS 存在许多实质性差异时，加载额外的样式表是一个好主意。在这种情况下，只使用一个样式表不是一个好主意，因为它会变得非常大。我认为，如果您只有微小的差异，那么向 body（或任何其他元素）添加一个 .touch 类是更好的方法。

于 2013-04-04T07:05:41.867 回答