在网页上检测移动浏览器？

Question

我想知道如何检测iPhone、iPad和其他移动浏览器。（使用JavaScript或CSS）

编辑：

不是用户代理字符串，请注意，因为它可以被伪造。

可能的重复问题：

• 通过用户代理自动检测移动浏览器？
• 基于http请求，在Web应用程序中检测移动浏览器的标准方式

- Moshe

---

可能是重复的问题：基于HTTP请求在Web应用程序中检测移动浏览器的标准方法。 - Preet Sangha

那又怎样呢？如果可以伪造，那么用户的意图本来就是以那种方式查看网页。 - Andrew

恐怕除了读取浏览器的用户代理字符串之外，没有其他方法可以检测浏览器。 - Octavian Helm

Answer 1

我会使用WURFL。它是一个开源的xml数据库，拥有超过10000个移动设备，可以通过user-agent HTTP头部值（几乎总是）检测您的移动电话和浏览器功能。

您将获得以下信息：

1. 屏幕尺寸
2. XHTML/HTML支持级别
3. 图形类型支持

还有其他很多信息。

流行语言（如PHP、Java和.NET）都有包装器API，因此您不必自己处理XML数据库。

- Pablo Santa Cruz

Answer 2

基本上，您需要检查用户代理字符串。

请参见http://www.hand-interactive.com/resources/detect-mobile-javascript.htm 检测 iPhone：

navigator.userAgent.toLowerCase().search("iphone") > -1

通常来说，特征检测比浏览器检测更好，知道用户的浏览器能做什么比知道他使用什么浏览器更好。Modernizer 是一个不错的工具。

- Adam

---

@Moshe 不好意思，请将 iPhone 更改为 iPad 以便检测 iPad。 - Adam

Answer 3

使用 Modernizr - http://modernizr.com/

Modernizr 是一个 JS 脚本，它在页面加载时测试浏览器的各种 HTML5 和 CSS3 功能。您可以查看 Modernizr JS 对象，或使用它添加到 HTML 元素的类。如果存在“touch”类，则表示您有一个触摸屏设备；否则，该类为 no-touch。然后您可以在 CSS 中执行以下操作

.touch .myElement { /* touch device styles */ }

.no-touch .myElement { /* regular browser styles */ }

测试浏览器的功能比嗅探用户代理更有用和未来可靠。通过这种方式，对于您想要添加的每个CSS3功能，您都可以轻松编写回退，就像我在这里展示的那样。

- Charles Wyke-Smith

Answer 4

使用JavaScript检测HTTP用户代理，也就是浏览器的名称。

- OOProg