window.matchMedia()

可以用來判斷螢幕寬度的方法。

matchMedia() 會回傳一個新的 MediaQueryList 物件，表示指定的媒體查詢字串(CSS @media 規則)解析後的結果。

MediaQueryList 物件以下屬性：

media：查詢敘述的內容。
matches：用於檢測查詢結果，如果檔案匹配 media query 串列，值為 true，否則為 false。

MediaQueryList 可透過監聽，在查詢結果發生變化時，呼叫函式。

e.g.

判斷螢幕目前是否為 750px，console.log 提示。

Code

let mql = window.matchMedia("(max-width: 750px)")
// console.log(mql)
// 監聽狀態改變
mql.addListener(testView)

function testView (e) {
    return e.matches ? console.log('Smaller than 750px width!!') : console.log('Bigger than 750px width!!')
}

// 執行時呼叫的監聽函式
testView(mql)

或是加上螢幕顏色變換來提示，將函式改寫一下。

Code

function testView (e) {
    // 螢幕尺寸查詢+螢幕變色
    if (testView.matches) {
        console.log('Smaller than 750px width!!')
        document.body.style.backgroundColor = "yellow";
     } else {
         console.log('Bigger than 750px width!!')
         document.body.style.backgroundColor = "pink";
     }
}

參考：
https://dotblogs.com.tw/ShihGoGo/2017/05/18/115614
https://pjchender.github.io/2018/06/27/webapis-window-物件/
https://www.twcode01.com/jsref/met-win-matchmedia.html