如何防止在移动设备中加载样式表答案

【问题标题】：How to prevent a style sheet from loading in mobile devices如何防止在移动设备中加载样式表
【发布时间】：2015-05-28 11:03:34
【问题描述】：

我希望防止智能手机和平板电脑上出现一系列动画。我能想到的最简单的解决方案是将这些动画 CSS 移动到单独的样式表中，并以某种方式阻止该样式表加载到所有智能手机和平板电脑中。

我怎样才能做到这一点？

更新：

【问题讨论】：

【解决方案1】：

例如：

@media only screen and (max-width:991px){
   /*insert here all the css you want to be load ONLY on devices below 991px*/
}

如果你想将你的 CSS 分成两张表，那么你可以在你的 <head> 标签中设置它：

<link href="exmaple.css" media="(min-width: 991px)" rel="stylesheet" type="text/css" />

编辑：

在您的情况下，一种选择是设置这样的媒体查询：

 @media only screen and (min-width:1200px){
/*insert here those CSS animations.*/
/*they will only take effect on devices above 1200px*/
}

当然，您可以设置任何分辨率并根据需要使用 min-width 和 max-width。

【讨论】：

@DavidMartins 然后你可以使用一些库作为 Modernizr 来检测设备是否可触摸。 modernizr.com
非常感谢南乔。我只是不认为媒体查询是最好的解决方案，因为某些平板电脑的屏幕与某些笔记本电脑一样宽。我认为解决这个问题的方法一定是“navigator.platform”或“user agent”之类的，但我不熟悉这些的使用。
@DavidMartins 看看你上面的评论。
嗨 Nancho，感谢您的帮助，虽然我从未使用过 Modernizr，但从我刚刚读到的接缝中，我想安装 Modernizr，然后使用一些 javascript 来实现我想要的，但我没有不知道语法会是什么样子。此外，由于存在具有此功能的笔记本电脑，因此寻址触摸设备并不是最好的解决方案。可能最好的解决方案是解决 Android、webOS、iPhone、iPad、iPod、黑莓、IEMobile、Opera Mini 等...
我没用过，只听说过。我想这一切都在他们的文档中进行了解释。在这一点之后，我没有足够的知识来继续帮助你。对不起和运气！ @DavidMartins

【解决方案2】：

您可以将有问题的 CSS 包装在 media query 中，不包括小型设备。

【讨论】：

非常感谢亚历克斯。我只是不认为媒体查询是最好的解决方案，因为某些平板电脑的屏幕与某些笔记本电脑一样宽。我认为解决这个问题的方法一定是“navigator.platform”或“user agent”之类的，但我不熟悉这些的使用。