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);