JS 获取和监听屏幕方向变化（portrait / landscape）

移动设备的屏幕有两个方向： landscape（横屏）和portrait（竖屏），在某些情况下需要获取设备的屏幕方向和监听屏幕方向的变化，因此可以使用Javascript提供的 MediaQueryList 对象接口，使用方法如下：

获取当前屏幕方向（是否是竖屏状态）

var mql = window.matchMedia("(orientation: portrait)");

打印mql，得到MediaQueryList对象如下：

可以通过访问对象的 matches 属性来查看查询结果：

 if(mql.matches) {
     console.log('portrait');   // 竖屏
 }else {
     console.log('landscape');  // 横屏
 }

监听屏幕方向变化，可以通过 MediaQueryList 对象的 addListener 方法来订阅事件，如下;

 var mql = window.matchMedia('(orientation: portrait)');
 console.log(mql);
 function handleOrientationChange(mql) {
     if(mql.matches) {
         console.log('portrait');  // 竖屏
     }else {
         console.log('landscape'); // 横屏
     }
 }
 // 输出当前屏幕模式
 handleOrientationChange(mql);
 // 监听屏幕模式变化
 mql.addListener(handleOrientationChange);

在浏览器中运行代码，并在手机模式下改变屏幕方向，在控制台中得到打印结果如下：

从结果可以知道，屏幕方向从原来的竖屏变成了横屏。

最后，移除订阅者的方法如下：

mql.removeListener(handleOrientationChange);