HTML5：如何使用JavaScript检测当前设备是移动设备还是PC？

Question

如何在 HTML5 中使用 JavaScript 代码检测用户是在移动设备还是 PC/Mac 浏览器上？

- gustavdebruyn

---

但是你为什么需要这样做呢？ - Lee Kowalkowski

Answer 1

我在几年前曾研究过这个问题。简而言之，你无法百分之百地准确识别客户端的设备类型。通常有两种常用方法提供“最佳猜测”：

1. 用户代理检测 这是通过检查客户端所声称的来确定设备类型。 例如：

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    // is mobile..
}

我不认为这个属性是完美的，因为我相信它很容易被意外或其他方式误改。此外，在两年/两周/两天后，这个列表仍然准确的可能性非常小！

2. 使用客户端能力 正如你所想象的那样，一种更加实用的方法-允许你迎合客户端已知的物理能力。例如：

if( screen.width <= 480 ) {     
    // is mobile.. 
}

然而，这也不是理想的方案，因为现代设备中越来越高的像素密度会给您一个误导性的结果：看起来您拥有比实际更多的“空间”。此外，不同的浏览器可能通过不同的方式展示其功能。

如果有任何更好的想法来可靠地区分桌面和设备，请留言！ :)

- ne1410s

---

只是澄清一下：您所说的“更高像素密度”是指DPI更高，因此像素更小且更紧密地排列在一起，即使设备具有1024像素宽的“笔记本分辨率”，这也可能导致移动设备上的主要可用性问题。对吗？ - Gimby

所以，例如平板电脑这样的设备可能会报告它的宽度为“1024像素”，并欺骗像我这样的“传统”网页开发人员认为这意味着它具有典型办公室显示器的宽度，后者也可能报告其宽度为1024像素。 - ne1410s