Question

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

我怎样才能做到这一点？

更新：

请不要媒体查询解决屏幕宽度（这远非精确，因为有些平板电脑和某些笔记本电脑一样宽）。
寻找触摸设备将是我可以忍受的解决方案，虽然不完美，因为有些笔记本电脑具有此功能。
我认为理想的解决方案是解决移动浏览器和操作系统问题。

Answer 1

您可以在css http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

中使用媒体查询

E.G：

@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 。

Answer 2

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

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

2 个答案: