JS 获取和监听屏幕方向变化(portrait / landscape)
移动设备的屏幕有两个方向: landscape(横屏)和portrait(竖屏),在某些情况下需要获取设备的屏幕方向和监听屏幕方向的变化,因此可以使用Javascript提供的 MediaQueryList 对象接口,使用方法如下:
获取当前屏幕方向(是否是竖屏状态)
var mql = window.matchMedia("(orientation: portrait)");
打印mql,得到MediaQueryList对象如下:
可以通过访问对象的 matches 属性来查看查询结果:
1 if(mql.matches) {
2 console.log('portrait'); // 竖屏
3 }else {
4 console.log('landscape'); // 横屏
5 }
监听屏幕方向变化,可以通过 MediaQueryList 对象的 addListener 方法来订阅事件,如下;
1 var mql = window.matchMedia('(orientation: portrait)');
2 console.log(mql);
3 function handleOrientationChange(mql) {
4 if(mql.matches) {
5 console.log('portrait'); // 竖屏
6 }else {
7 console.log('landscape'); // 横屏
8 }
9 }
10 // 输出当前屏幕模式
11 handleOrientationChange(mql);
12 // 监听屏幕模式变化
13 mql.addListener(handleOrientationChange);
在浏览器中运行代码,并在手机模式下改变屏幕方向,在控制台中得到打印结果如下:
从结果可以知道,屏幕方向从原来的竖屏变成了横屏。
最后,移除订阅者的方法如下:
mql.removeListener(handleOrientationChange);
给心灵一个纯净空间,让思想,情感,飞扬!