如何识别设备为iPad和Galaxy Tab制作单独的css？

Question

我的web应用程序必须支持多个设备。我已经为所有移动平板设备编写了通用的CSS，但它在iPad上给出了一些问题。我找到了专门针对iPad的修补程序。

现在我想分离出iPad和银河设备的CSS。

有什么办法可以在媒体查询或任何其他方式来加载一个CSS为iPad和另一个为星系设备？

Answer 1

您可以使用media queries进行组合检测设备并定位您的CSS。设备具有一组特定的属性（分辨率，方向，宽度，高度等），您可以使用媒体查询挑选它们。这里的MDN's reference和another article进一步的参考，还有一个similar question

Answer 2

可以使用是一个关于size of screen问，如果这是不是足够多出于某种原因（可能是屏幕大小相同或者你必须知道的唯一媒体查询模型），您可以使用this script来识别设备并根据设备加载相关的css。

Answer 3

您可以非常简单地检测iOS设备（如iPad或iPhone）的http请求用户代理，并将它们与正则表达式进行比较，并相应地包含相关的CSS。 一个简单的正则表达式来检测iPhone/iPad的将是：

(iPhone|iPad).*?OS ((\d+)_(\d+))(?:_(\d+))? 

Answer 4

如果通过“修复专门针对iPad的，你说的是修复到已安装Safari浏览器实例 - 你应该使用特征检测。

使用指定的JS库是最容易的，我更喜欢Modernizr。