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

作者: 阮一峰

日期: 2021年9月29日

有时候,前端网页需要知道,用户使用的是手机浏览器还是桌面浏览器。

本文根据 StackOverflow,整理了 JavaScript 侦测手机浏览器的五种方法。

一、navigator.userAgent

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

JS 通过navigator.userAgent属性拿到这个字符串,只要里面包含mobiandroidiphone等关键字,就可以认定是移动设备。


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

(完)

留言(19条)

后端开发 只用过userAgent这一种,学习了

我目前的方法是根本不检测到底是移动端还是桌面端,直接通过 CSS 的媒体查询(@media),制定屏幕在不同宽度时的布局。

大多数网站判断这个没啥意义吧,除非想在手机端干点啥事……就比如百度网盘,手机端就必须调用app才能下载文件。百度网盘好像用的就是navigator.platform,这个是只读的,在chrome模拟手机时还是返回win32

我有一个逆向问题:如何让桌面设备的浏览器默认打开移动版页面

引用dong的发言:

大多数网站判断这个没啥意义吧,除非想在手机端干点啥事……就比如百度网盘,手机端就必须调用app才能下载文件。百度网盘好像用的就是navigator.platform,这个是只读的,在chrome模拟手机时还是返回win32

这个只读应该只是对js来说吧,对APP来说还不是想怎么改就怎么改

引用Rivalsa的发言:

我目前的方法是根本不检测到底是移动端还是桌面端,直接通过 CSS 的媒体查询(@media),制定屏幕在不同宽度时的布局。

一定场景下也会用到。我也是响应式,偶尔会用到。

大神,你不是说因国庆节,所以提前到今天周四发刊吗,不会已经放假了吧

引用ss的发言:

大神,你不是说因国庆节,所以提前到今天周四发刊吗,不会已经放假了吧

暂停休息一周~

阮老师您好,请问能出一期低代码实现的专题吗

引用ss的发言:

大神,你不是说因国庆节,所以提前到今天周四发刊吗,不会已经放假了吧

hhh 我也在等周刊,每周最后一天的精神食粮

所以说一般手机浏览器设置里的浏览器标识仅仅是更改了 user agent
有时候网站对不同设备展示的内容有差异,这样有些东西就不得不通过更改标识通过检测
然鹅有些网站用移动设备访问特别难受,尤其是按钮跑到屏幕外的时候,还滑不过去

引用NAN的发言:

hhh我也在等周刊,每周最后一天的精神食粮

我也是,在等着划水

引用ss的发言:

大神,你不是说因国庆节,所以提前到今天周四发刊吗,不会已经放假了吧

这个不是周刊啊

这个点了,还不发周刊,都要下班啦

阮老师国庆快乐!

节日快乐。。。

学习了,原来有这么多方法判断

引用打工仔的发言:

这个只读应该只是对js来说吧,对APP来说还不是想怎么改就怎么改

APP有必要判断是否是手机端吗?就算APP有电脑版,APP也清楚的知道自己是电脑版……

引用y的发言:

我有一个逆向问题:如何让桌面设备的浏览器默认打开移动版页面

只有navigator.userAgent这个属性能有不同的结果,其他都不行。获取用户设备的需求就是为了布局适配,但是某些人就干某些事了,挺恶心的

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接