admin管理员组文章数量:1564203
一、navigator.userAgent【分析浏览器user agent字符串,其中包含了设备信息】
①JS通过navigator.userAgent属性识别移动设备,里面包含了(mobi、android、iphone等关键字即为移动设备)
if (
navigator.userAgent.match(/Mobi/i) ||
navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/iPhone/i)
) {
// 当前设备是移动设备
}
缺点:该方法虽然方便简单,但用户可修改字符串,让手机浏览器伪装成桌面浏览器。
②Chromium 系的浏览器还有一个navigator.userAgentData属性,它把userAgent字符串作为对象解析,其中有一个mobile属性做为布尔值来判断是否移动设备。
navigator.userAgentData.mobile
缺点:苹果的 Safari 浏览器和 Firefox 浏览器都不支持这个属性,具体情况可以查看 Caniuse 网站。
③还有一个已经废除的navigator.platform属性,所有浏览器都支持,所以也可以用。它返回一个字符串,表示用户的操作系统。
二、window.screen,window.innerWidth【根据屏幕宽度判断】
①window.screen获取用户设备屏幕信息,当宽度(window.screen.width)小于500时,判断为手机
缺点:如果手机为横屏操作就无法判断。
②window.innerWidth
返回浏览器窗口里面的网页可见部分的宽度,比较适合指定网页在不同宽度下的样式。
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。
缺点:苹果的 Safari 浏览器和 Firefox 浏览器都不支持这个属性。
四、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
版权声明:本文标题:通过JavaScript监测手机浏览器的五种方法 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1727474192a1116372.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论