Question

我听说Modernizr的触摸测试是测试正在浏览页面的设备是触摸还是多点触控的最佳方法之一。

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

但是，我的代码似乎没有用。我做错了什么？

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

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

Answer 1

您的脚本块看起来正确，因此问题必须是其他问题。既然你确定你的Modernzr版本包含Yepnope，这里有一些猜测：

您的脚本块位于脚本标记之前，包括Modernzr
CSS的路径错误

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

Answer 2

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

像这样：

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

然后使用.touch：

为样式表类添加前缀

a:hover {
    color: red;
}


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

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

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

2 个答案: