Javascript 尝试仅为带有Modernizer的触摸设备加载样式表

我听说Modernizer的触摸测试是测试查看页面的设备是触摸还是多点触摸的最佳方法之一

我试图使用它（触摸测试）以及Modernizer的加载功能，仅当设备具有触摸功能时才加载样式表

然而，我的代码似乎不起作用。我做错了什么

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

现代化负荷({
测试：现代化触摸，
是的：“assets/css/touch.css”
});

更新：对不起，我应该澄清什么是不工作： 当我在我的多点触控智能手机上访问页面时，这些样式不会生效。 我在普通样式表中应用了这些样式，它们生效了，但是当我将它们切换到touch.css并尝试使用Modernizer有条件地加载它们时，它就不起作用了。

---

我的Modernizer副本确实包括yepnope和touch test，因为我在它们工作的其他实例中使用了这两种测试。

您的脚本块看起来是正确的，所以问题一定是其他原因。由于您确信您的Modernzr构建包含Yepnope，下面是一些猜测：

脚本块位于脚本标记（包括Modernzr）之前

CSS的路径是错误的

---

首先，我将在.load（）语句中添加一个

回调：function（）{alert（'loaded！'）；}

，以查看是否发生了这种情况。如果没有，我会将

Modernzr.touch

替换为

true

，并在桌面浏览器上测试是否有和Javascript错误发生。

另一个解决方案不是为支持触摸的设备加载额外的样式表，而是向

添加一个类

像这样：

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

然后在样式表类前面加上

。触摸
：

a:hover {
    color: red;
}


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

当触摸和非触摸设备的CSS存在许多实质性差异时，加载额外的样式表是一个好主意。在这种情况下，只使用一个样式表不是一个好主意，因为它将变得非常大。如果只有细微的差别，我认为在body（或任何其他元素）中添加.touch类是更好的方法。
什么是“似乎不起作用”呢？控制台中是否有错误？你的Modernizer版本是否包含yepnope？@Mathletics我用你的问题的答案更新了问题。很好的建议，另一个测试可能是将CSS设置为“否”，只是为了检查它是否会在其他情况下加载？是的，这也排除了由于某种原因当前测试在该设备上失败的可能性。不过有趣的问题是，根据问题中的信息，OP确实知道他在做什么。目前没有电脑，所以无法测试自己。对结果感兴趣：）@thaJeztah谢谢你的建议。我试过了，他们保证css文件的路径是正确的。最后我下载了一本新的Modernizer，现在它可以正常工作了。@PeterHerdenborg谢谢你的建议。我试过了，结果是真的。最后我下载了一本新的Modernizer，现在它可以工作了。真奇怪。