寻找一种可靠的方法来测试移动设备上的CSS过渡性能

Question

我正在使用jquery mobile构建功能丰富的移动网站。在所有视图中都有一些css过渡，盒阴影，渐变......

我关注的是使用低档手机浏览我网站的用户。很多手机支持过渡，但会以可怕的帧速率显示它们：我在想老款机器人，首先是iPad等等。所以对于这种硬件，我想禁用它们（以及非常昂贵的盒子阴影） ）。

现在，我正在做的是根据用户代理应用此规则：

* {
      box-shadow: none !important;
      -webkit-box-shadow: none !important;
      transition: none !important;
      -webkit-transition: none !important;
      moz-transition: none !important;
      -ms-transition: none important;
      -o-transition: none !important;
   }

然而，这完全不可靠：使用Android 4的手机将通过用户代理测试，但可能会表现得非常糟糕。更不用说用户可以升级他们的Android版本，甚至可以在旧硬件上使用自定义ROM。最后，他们总是可以改变他们的用户代理。

我建议的另一个测试是在空白页面上开始宽度/高度转换，然后检查它是否及时完成。尽管我看到这个有用，但我不确定它有多可靠，因为一般使用涉及DOM中更多的元素。

我想补充一点，我并没有大量使用CSS3效果，而且我已经考虑到了优化而建立了这个网站，所以请不要建议像背面可见性这样的优化或黑客，我知道。

Answer 1

有几种解决方案，但我认为您需要一种仅在客户端设备上运行的解决方案。

如果是这种情况，请使用：

首先，您需要下载/使用Modernizer：http://modernizr.com/

您可以使用它来检测哪些设备支持较新的HTML5 / CSS3选项。 您需要检查的是：内联SVG支持，您可以在官方文档中找到它：http://modernizr.com/docs/#features-html5

早期版本的Android（3.0之前版本）和iOS版本（5.0之前版本）不支持它，找到它 在这里：http://caniuse.com/#feat=svg-html5

这是我所知道的唯一可靠的客户端解决方案。如果您需要更具体的检测，则需要使用服务器端检测。目前最好的是WURFL，但它会花费你。

在我的其他answer中详细了解它。