JavaScript 侦测手机浏览器的五种方法

最新推荐文章于 2024-07-29 08:30:00 发布

紫微前端

最新推荐文章于 2024-07-29 08:30:00 发布

阅读量918

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端知识加深文章标签： javascript html5 vue.js

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/120648311

前端知识加深专栏收录该内容

510 篇文章 ¥39.90 ¥99.00

订阅专栏

本文介绍了五种JavaScript方法来检测手机浏览器：1) 分析navigator.userAgent；2) 使用window.screen和window.innerWidth；3) 检测window.orientation；4) 监听touch事件；5) 利用window.matchMedia()结合CSS媒体查询。另外还提到了react-device-detect这样的工具包作为额外的设备检测解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、navigator.userAgent

最简单的方法就是分析浏览器的 user agent 字符串，它包含了设备信息。

JS 通过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; 
</

了解本专栏