js检测屏幕的方法总结 2021-10-05

navigator.userAgent

最简单的方法就是分析浏览器的 user agent 字符串，它包含了设备信息。通过判断是否包含Mobile、Android、iPhone等关键字，就可以认定是移动设备。

if (/iPhone|iPod|Android|ios|iPad|BlackBerry|Mobile/i.test(navigator.userAgent)) {// 当前设备是移动设备
}// 另一种写法
if (navigator.userAgent.match(/Mobile/i) ||navigator.userAgent.match(/Android/i) ||navigator.userAgent.match(/iPhone/i)
) {// 当前设备是移动设备
}

Android 或 iOS

let browser = {versions: function() {var ua = navigator.userAgent;return {//移动终端浏览器版本信息 trident: ua.indexOf('Trident') > -1, //IE内核presto: ua.indexOf('Presto') > -1, //opera内核webKit: ua.indexOf('AppleWebKit') > -1, //苹果、谷歌内核gecko: ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') == -1, //火狐内核mobile: !!ua.match(/AppleWebKit.*Mobile.*/) || !!ua.match(/AppleWebKit/), //是否为移动终端ios: !!ua.match(/\(i[^;]+;( U;)? CPUa.+Mac OS X/), //ios终端android: ua.indexOf('Android') > -1 || ua.indexOf('Linux') > -1, //android终端或者uc浏览器iPhone: ua.indexOf('iPhone') > -1 || ua.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器iPad: ua.indexOf('iPad') > -1, //是否iPadwebApp: ua.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部winPhone: ua.indexOf('Windows Phone') > -1 //是否为Windows Phone};}(),language: (navigator.browserLanguage || navigator.language).toLowerCase()
}if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {window.location="https://itunes.apple.com/xxx";
}
else if (browser.versions.android) {window.location="http://xxx/xxx.apk";
}// console.log("语言版本: " + browser.language);
// console.log(" 是否为移动终端: " + browser.versions.mobile);
// console.log(" ios终端: " + browser.versions.ios);
// console.log(" android终端: " + browser.versions.android);
// console.log(" 是否为iPhone: " + browser.versions.iPhone);
// console.log(" 是否iPad: " + browser.versions.iPad);

window.orientation

侦测屏幕方向，判断横屏或竖屏
window.orientation属性用于获取屏幕的当前方向，只有移动设备才有这个属性，桌面设备会返回undefined。

function orient() {if (window.orientation == 0 || window.orientation == 180) {$("body").attr("class", "portrait");orientation = 'portrait';return false;}else if (window.orientation == 90 || window.orientation == -90) {$("body").attr("class", "landscape");orientation = 'landscape';return false;}
}

缺点：iOS15 中 Safari 才支持该属性；

window.screen，window.innerWidth

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

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";}
};

touch 事件

手机浏览器的 DOM 元素可以通过ontouchstart属性，为touch事件指定监听函数。

if ("ontouchstart" in window) {startEvt = "touchstart";moveEvt = "touchmove";endEvt = "touchend";
} else {startEvt = "mousedown";moveEvt = "mousemove";endEvt = "mouseup";
}

window.matchMedia()

matchMedia() 返回一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。
matchMedia()方法的值可以是任何一个 CSS @media 规则的特性, 如 min-height, min-width, orientation 等。
window.matchMedia() 方法接受一个 CSS 的 media query 语句作为参数，判断这个语句是否生效。

MediaQueryList 对象有以下两个属性：

media：查询语句的内容。
matches：用于检测查询结果，如果文档匹配 media query 列表，值为 true，否则为 false。

window.matchMedia("only screen and (max-width: 760px)").matches;

上例中window.matchMedia()的参数是一个 CSS 查询语句，表示只对屏幕宽度不超过 700 像素的设备生效。它返回一个对象，该对象的matches属性是一个布尔值。如果是true，就表示查询生效，当前浏览器匹配此条件。

除了通过屏幕宽度判断，还可以通过指针的精确性判断。

window.matchMedia("(pointer:coarse)").matches;
window.matchMedia("(any-pointer:coarse)").matches;

CSS 语句pointer:coarse表示当前设备的指针是不精确的。由于手机不支持鼠标，只支持触摸，所以符合这个条件。
有些设备支持多种指针，比如同时支持鼠标和触摸。pointer:coarse只用来判断主指针，此外还有一个any-pointer命令判断所有指针。

MediaQueryList 对象还可以监听事件。通过监听，在查询结果发生变化时，就调用指定的回调函数。

addListener(functionref) 添加一个新的监听器函数，该函数在媒体查询的结果发生变化时执行。
removeListener(functionref) 从媒体查询列表中删除之前添加的监听器。如果指定的监听器不在列表中，则不执行任何操作。

function myFunction(x) {if (x.matches) { // 媒体查询document.body.style.backgroundColor = "yellow";} else {document.body.style.backgroundColor = "pink";}
}var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // 执行时调用的监听函数
x.addListener(myFunction) // 状态改变时添加监听器