Question

我正在进行一个水平滚动网站，并添加它有几个CSS动画，完全崩溃我正在测试的ipad上的所有浏览器，所以我想知道是否有一种方法可以让代码检测超出屏幕尺寸的移动设备（iOs，Android ..），只为它禁用动画？

提前感谢您的所有帮助。

我没有附加任何代码，因为，我真的不知道我会用什么来检测Os，我知道使用媒体查询，但正如我所说的窗口大小不是我正在寻找它的我想要定位的移动操作系统。

Answer 1

您可以使用navigator.platform属性检查设备类型，然后使用一些javascript添加包含CSS动画的样式表（如果它不是排除的平台之一。）

例如，要为除iPad之外的所有设备加载动画，您可以执行以下操作：

if(navigator.platform != 'iPad')
{
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'animations.css';
    document.getElementsByTagName('head')[0].appendChild(link);
}

有关平台值的列表，请参阅此处：
What is the list of possible values for navigator.platform as of today?

有关使用JS加载样式表的更多信息，请查看此处：
How to load up CSS files using Javascript?

禁用移动设备上的CSS动画

1 个答案: