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, //是否iPad
            webApp: 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) // 状态改变时添加监听器