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

【问题标题】：How to identify device to make separate css for iPad and Galaxy Tab?如何识别设备以为 iPad 和 Galaxy Tab 制作单独的 css？
【发布时间】：2012-04-12 07:01:16
【问题描述】：

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

现在我想分离出适用于 iPad 和 Galaxy 设备的 CSS。

有没有办法在媒体查询或任何其他方式为 ipad 加载一个 css 为 Galaxy 设备加载另一个 css？

【问题讨论】：

也许这有帮助：stackoverflow.com/questions/4964589/…

标签： javascript css

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

如果“专门针对 iPad 的修复”是指对已安装 Safari 实例的修复 - 您应该使用功能检测。

使用指定的 JS 库最容易做到这一点，我更喜欢Modernizr。

【讨论】：