android - 在移动设备上禁用 css 动画

Question

我在一个水平滚动网站上工作，并向它添加了几个 CSS 动画，这些动画完全崩溃了我正在测试的 ipad 上的所有浏览器，所以我想知道是否有办法让代码检测超过屏幕尺寸的移动设备(iOS、Android..)，只是禁用它的动画吗？

提前感谢您的所有帮助。

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

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?