JavaScript 检测移动设备

在现代化的 Web 开发中，我们需要根据用户使用的设备类型，对内容进行适配。在移动设备和桌面设备之间最显著的区别是屏幕大小和输入方式。JavaScript 可以帮助我们实现对移动设备的检测，从而对页面进行不同的布局或交互方式的选择。

检测移动设备的几种方式

1. userAgent

HTTP 请求头部中的 User-Agent 字段可以告诉我们用户使用的浏览器和操作系统，通过判断 User-Agent 中包含的关键字，我们可以判断用户使用的设备类型。

const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)

上述代码使用 test 方法对 navigator.userAgent 字符串进行匹配，匹配结果为 true 表示是移动设备。需要注意的是，该方式存在一些用户行为和浏览器设置可以造成 User-Agent 伪装的情况，不太可靠。

2. screen.width/screen.height

通过 window.screen.width 和 window.screen.height 获取屏幕分辨率，然后根据一个屏幕比例的阈值，确定是否是移动设备。比如，当屏幕宽高比超过 4:3 时，就认为是宽屏设备。

const isMobile = window.screen.width / window.screen.height < 4 / 3;

3. touch 事件

移动设备具有触摸屏幕的功能，因此可以通过判断是否支持触摸事件来判断是否是移动设备：

const isMobile = 'ontouchstart' in window;

这种方式同样存在问题，因为一些 Windows 10 设备也支持触摸屏幕。

综合考虑的移动设备检测

最可靠的移动设备检测方式应该是综合多种因素进行判断。例如，判断屏幕宽度是否小于某个阈值，或者判断某些常见的移动设备型号（iPhone、iPad、Android Phone、Android Tablet）等。

const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

const isTablet = /iPad|Android/i.test(navigator.userAgent) && !/Mobile/i.test(navigator.userAgent);

const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);

const isAndroid = /Android/i.test(navigator.userAgent);

const isWindowsPhone = /Windows Phone/i.test(navigator.userAgent);

const isMobileWidth = window.innerWidth <= 768;

if (isMobile || (isTablet && !isMobileWidth)) {
  // 移动设备或平板电脑，大于 768px 宽度时不算
} else {
  // 桌面设备
}

上述代码中使用了多种检测方式，并根据屏幕宽度和设备类型判断是否是移动设备。这是一种比较全面和可靠的移动设备检测方式。

结语

以上是 JavaScript 检测移动设备的几种方式，开发者可以根据自己的需求和实际情况选择合适的方式进行判断。需要提醒的是，任何自动的设备检测都可能存在误判和漏检，因此需要在实际使用中进行测试和调整。