有没有办法只检测带有 CSS 的 Android 浏览器？答案

【问题标题】：Is there any way to detect only Android browsers with CSS?有没有办法只检测带有 CSS 的 Android 浏览器？
【发布时间】：2011-08-11 21:33:25
【问题描述】：

是否有任何 CSS hack 可以仅检测 Android 浏览器来编写 CSS？不是所有的 WebKit 浏览器——我想为 iPhone 和 Android 浏览器上的某些元素编写不同的 CSS。

例如http://paulirish.com/2009/browser-specific-css-hacks/

我想要一个适用于 Android 浏览器的 CSS hack。

【问题讨论】：

我个人会避免这种情况。从长远来看，浏览器检测总是难以维护。这就是为什么我们转向媒体查询之类的问题，以询问浏览器的特征，而不是“这是哪个浏览器？”
CSS 不是为处理这类事情而设计的。
有一些特定于 Android 的怪癖，例如 a rendering issue involving the "Auto-fit pages" feature。一种专门针对 Android 浏览器的一些规则（例如针对该问题的无操作 background-image: 解决方法）将非常有帮助。

标签： css webkit mobile-website android-browser

【解决方案1】：

您引用的 CSS hack 利用 CSS 中的错误来针对特定浏览器（通常是 hack 以使某些东西与 IE 6/等旧版浏览器一起工作）。 CSS 本身无法进行浏览器检测，尤其是操作系统检测，而这正是您要寻找的。p>

我在上面对您所说的问题的评论（不要这样做！），您可以获取用户代理字符串，它将包含“Android”作为操作系统：

Mozilla/5.0 (Linux; U; Android 1.1; en-gb; dream) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2 – G1 Phone

我不能说这是否 100% 可靠（尽管有理由认为每部 Android 手机都应该这样报告），并且没有什么可以阻止这种情况在未来发生变化。您需要在Javascript 中进行此检测，并让 JS 为 Android 加载您的自定义 CSS 文件（让它在文档中添加另一个样式标签），或者在您的服务器端编程（ASP/PHP 等）中进行检测) 并将样式标签回显到您的源代码。

【讨论】：

【解决方案2】：

当前的最佳做法是使用功能检测而不是浏览器/操作系统检测。有一个名为Modernizr 的javascript 库可能会有所帮助。我相信它还有一些技巧可以让非 CSS3 浏览器处理一些新的 CSS3 标签，例如 header 和 footer。

【讨论】：

是的，特征检测非常完美……但也存在浏览器错误。同样琐碎的 CSS 2 在桌面 webkit 上完美运行，并在 android 浏览器浏览器上给出了一些意想不到的结果。