javascript - 用户代理的条件样式表

Question

选择将根据用户代理显示的样式表的最佳方法是什么？

例如，我想为 Android 显示一个 css 样式，为 iPhone 显示一个不同的样式。

• 仅使用 css 可行吗？
• 我可以使用媒体查询之类的东西吗？

提前致谢

Answer 1

在 Internet Explorer 中，您可以使用条件注释 (http://msdn.microsoft.com/en-us/library/ms537512.aspx) 在特定浏览器中包含样式表。这种技术在其他浏览器中不起作用，我相信它在最新版本的 Internet Explorer 中也不起作用。

据我所知，实现此目的的唯一方法是使用 Javascript。最简单的方法是根据用户代理字符串使用 Javascript 在页面的 HTML 标记(即“.android”或“.iphone”)中添加一个类。在 CSS 中，只需在样式表中引用 .android 或 .iphone 即可专门针对其中一个。

但是，最好的方法是尽可能避免进行特定浏览器检测。特征检测是首选方法 ( http://www.joezimjs.com/javascript/feature-detection-vs-browser-detection/ )。这是一个异常(exception)，因为您的意图是根据设备使用不同的主题。

请参阅 isMobile Javascript 库 ( https://github.com/kaimallea/isMobile ) 以轻松检测 Apple 或 Android 设备。只要每个主题的样式表不是很大，我就建议将 Android 和 Apple 样式表合并为一个。比使用带有少量自定义 Javascript 的 isMobile 库将必要的 CSS 类添加到 HTML 标记。