js 识别当前设备信息是否是移动端

最新推荐文章于 2024-02-29 11:47:14 发布

X.Py

最新推荐文章于 2024-02-29 11:47:14 发布

阅读量1.3w

点赞数 4

分类专栏： javaScript 大前端文章标签： chrome javascript android

原文链接：https://www.ruanyifeng.com/blog/2021/09/detecting-mobile-browser.html

版权

大前端同时被 2 个专栏收录

38 篇文章 3 订阅

订阅专栏

javaScript

36 篇文章 0 订阅

订阅专栏

这篇博客介绍了通过JavaScript检测设备是否为移动设备的四种方法：分析navigator.userAgent字符串，检查window.screen.width，利用window.orientation属性，以及检测是否存在touch事件。此外，还推荐了react-device-detect库作为设备检测工具。

摘要由CSDN通过智能技术生成

一、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)
) {
  // 当前设备是移动设备
}

二、通过 window.screen，window.innerWidth 屏幕宽度

另一种方法是通过屏幕宽度，判断是否为手机。

window.screen对象返回用户设备的屏幕信息，该对象的width属性是屏幕宽度（单位为像素）。

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

三、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; 
  }
}

五、使用工具包

除了上面这些方法，也可以使用别人写好的工具包。这里推荐 react-device-detect，它支持多种粒度的设备侦测。

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

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