王哆啦的自留地 - 2021年10月
type: channel
link: https://www.wangduola.com/2021/10/
description: 深筑墙，广积粮。
items: JavaScript 侦测手机浏览器的五种方法

JavaScript 侦测手机浏览器的五种方法
type: item
date: 2021-10-03T10:57:00+08:00
description: 有时候，前端网页需要知道，用户使用的是手机浏览器还是桌面浏览器。本文根据 StackOverflow，整理了 JavaScript 侦测手机浏览器的五种方法。一、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; 注意，苹果的 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 语句作为参数，判断这个语句是…