文章/答案/技术大牛

发布

社区首页 >问答首页 >尝试仅为具有现代化功能的触摸设备加载样式表

问尝试仅为具有现代化功能的触摸设备加载样式表
EN

Stack Overflow用户

提问于 2013-04-01 06:16:21

回答 2查看 3.9K关注 0票数 3

我听说现代的触控测试是测试正在浏览页面的设备是否支持触控或多点触控的最好方法之一。

我正在尝试使用它(触摸测试)以及现代的加载函数，以便仅当设备具有触摸功能时才加载样式表。

但是，我的代码似乎不能正常工作。我做错了什么？

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

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

javascript

css

modernizr

回答 2

Stack Overflow用户

发布于 2013-04-01 06:38:29

您的脚本块看起来是正确的，所以问题一定出在其他地方。既然你确定你的现代版本包含Yepnope，这里有几个猜测：

您的脚本块位于脚本标记之前，包括

CSS的路径错误

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

票数 3

Stack Overflow用户

发布于 2013-04-04 15:05:42

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

如下所示：

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

，然后在样式表类前面加上.touch。

a:hover {
    color: red;
}


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

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15735202

复制

相似问题

问尝试仅为具有现代化功能的触摸设备加载样式表
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问尝试仅为具有现代化功能的触摸设备加载样式表EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问尝试仅为具有现代化功能的触摸设备加载样式表
EN