JavaScript判断是否手机浏览器的五种方法

随着移动互联网的普及，前端开发中经常需要区分用户使用的是手机浏览器还是桌面浏览器。本文总结了五种利用JavaScript判断设备类型的方法，并附带详细示例代码，旨在为开发者的学习与工作提供有价值的参考。

一、分析 navigator.userAgent

这是最基础且广泛使用的方法，核心在于解析浏览器的 user agent 字符串，其中包含了设备的相关信息。

在 JavaScript 中，可以通过navigator.userAgent属性获取该字符串。若字符串中包含mobi、android或iphone等关键字，通常可判定为移动设备。

if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
  // 当前设备是移动设备
}

// 另一种写法
if (
  navigator.userAgent.match(/Mobi/i) ||
  navigator.userAgent.match(/Android/i) ||
  navigator.userAgent.match(/iPhone/i)
) {
  // 当前设备是移动设备
}

该方法的优点是实现简单快捷，但缺点在于可靠性较低，因为用户或浏览器可以修改此字符串，从而将手机浏览器伪装成桌面浏览器。

在 Chromium 内核的浏览器中，还存在一个navigator.userAgentData属性，其功能与前者类似。区别在于，它将 user agent 字符串解析为一个对象，通过该对象的mobile属性返回布尔值，以指示用户是否使用移动设备。

const isMobile = navigator.userAgentData.mobile; 

需要注意的是，苹果的 Safari 浏览器和 Firefox 浏览器目前不支持此属性，具体兼容性信息可参考 Caniuse 网站。

此外，还有一个已废弃的 navigator.platform 属性，所有浏览器均支持，因此也可作为判断依据。它返回表示用户操作系统的字符串。

if (/Android|iPhone|iPad|iPod/i.test(navigator.platform)) {
  // 当前设备是移动设备
}

二、利用 window.screen 与 window.innerWidth

另一种思路是通过屏幕尺寸来判断设备类型。

window.screen对象提供了设备的屏幕信息，其width属性表示屏幕宽度（单位为像素）。

if (window.screen.width < 500) {
  // 当前设备是移动设备 
}

在示例代码中，若判断条件window.screen.width小于500像素，则视为手机设备。

此方法的局限性在于，当手机处于横屏模式时，屏幕宽度可能超过阈值，导致识别失败。

另一个相关属性window.innerWidth返回浏览器窗口内网页可见区域的宽度，更适合用于根据窗口宽度动态调整网页样式。

const getBrowserWidth = function() {
  if (window.innerWidth < 768) {
    return "xs";
  } else if (window.innerWidth < 991) {
    return "sm";
  } else if (window.innerWidth < 1199) {
    return "md";
  } else {
    return "lg";
  }
};

三、检测 window.orientation

第三种方法是侦测屏幕方向。手机屏幕支持横竖屏切换，而桌面设备通常不具备此特性。

window.orientation属性用于获取当前屏幕方向，该属性仅存在于移动设备中，桌面设备会返回undefined。

if (typeof window.orientation !== 'undefined') {
  // 当前设备是移动设备 
}

需注意的是，iPhone 上的 Safari 浏览器不支持该属性。

四、检测 touch 事件支持

第四种方法是检查 DOM 元素是否支持通过ontouchstart属性为touch事件指定监听函数。桌面设备通常不具备此属性。

function isMobile() { 
  return ('ontouchstart' in document.documentElement); 
}

// 另一种写法
function isMobile() {
  try {
    document.createEvent("TouchEvent"); return true;
  } catch(e) {
    return false; 
  }
}

五、使用 window.matchMedia()

此方法结合 CSS 媒体查询进行判断。

CSS 通过 media query（媒介查询）为网页定义响应式样式。若针对手机的 media query 生效，则可推断当前设备为移动设备。

window.matchMedia()方法接收一个 CSS 的 media query 语句作为参数，并判断该语句是否生效。

let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

示例中，window.matchMedia()的参数为 CSS 查询语句，表示仅对屏幕宽度不超过700像素的设备生效。该方法返回一个对象，其matches属性为布尔值。若该值为true，则表明查询生效，当前设备为手机。

除了基于屏幕宽度，还可以通过指针精确性进行判断。

let isMobile = window.matchMedia("(pointer:coarse)").matches;

示例中的 CSS 语句pointer:coarse表示当前设备的指针是不精确的。由于手机主要支持触摸操作而不支持鼠标，因此符合这一条件。

部分设备同时支持多种指针方式，例如鼠标和触摸。pointer:coarse仅用于判断主指针，此外还有一个any-pointer命令可用于判断所有指针。

let isMobile = window.matchMedia("(any-pointer:coarse)").matches;

示例中，any-pointer:coarse表示在所有指针中，只要有一个指针是不精确的，即符合查询条件。

六、使用工具库

除了上述原生方法，也可以使用现成的工具库。这里推荐 react-device-detect，它支持多种粒度的设备侦测功能。

import {isMobile} from 'react-device-detect';

if (isMobile) {
  // 当前设备是移动设备
}

以上就是关于JavaScript判断手机浏览器的五种方法的介绍，更多相关js判断是手机的五种方法内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！