JavaScript 检测移动浏览器

在编写移动页面时，需要在 JavaScript 中检测移动浏览器并进行一些定制化操作。本文将介绍几种方法来检测移动浏览器，并提供代码示例。

方法一：检测用户代理

用户代理是浏览器发送到服务器的字符串，其中包含了浏览器的类型、版本和操作系统等信息。通过检测用户代理，可以判断用户使用的浏览器类型，从而进行一些相应的操作。

const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (isMobile) {
  // 执行移动端代码
} else {
  // 执行PC端代码
}

以上代码中，我们通过正则表达式来检测用户代理中是否包含了移动设备的关键词，如果包含就认为是移动端浏览器。

方法二：检测触摸事件

移动设备最显著的特征就是支持触摸事件。通过检测触摸事件，可以判断用户是否使用了移动设备来浏览页面。

const isTouchDevice = 'ontouchstart' in window || navigator.msMaxTouchPoints > 0;
if (isTouchDevice) {
  // 执行移动端代码
} else {
  // 执行PC端代码
}

以上代码中，我们通过检测 ontouchstart 属性是否存在来判断浏览器是否支持触摸事件。

方法三：使用第三方库判断

除了手动编写代码来判断移动浏览器外，我们还可以使用一些第三方库来帮助我们判断。以下是两个比较常用的库：

Mobile-detect

这是一个专门用于检测移动设备的库，支持检测设备类型、操作系统类型和版本等信息。

const md = new MobileDetect(window.navigator.userAgent);
if (md.mobile()) {
  // 执行移动端代码
} else {
  // 执行PC端代码
}

Bowser

这是一个用于检测浏览器类型和版本的库，支持检测浏览器厂商、名称、版本等信息。

const browser = Bowser.getParser(window.navigator.userAgent);
if (browser.getPlatformType() === 'mobile') {
  // 执行移动端代码
} else {
  // 执行PC端代码
}

总结

通过以上三种方法，我们可以比较准确地判断出用户使用的是移动设备还是PC设备浏览页面，并进行一些相应的操作。在实际开发中，我们可以根据特定的需求选择相应的方法来检测移动浏览器。