用JS判斷當(dāng)前屏幕大小尺寸，我們可以通過(guò)Window matchMedia() 方法來(lái)匹配指定尺寸元素，然后與當(dāng)前屏幕大小進(jìn)行判斷。
下面我們就結(jié)合簡(jiǎn)單的代碼示例，給大家介紹JS判斷當(dāng)前屏幕大小的方法。
代碼示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS判斷屏幕大小示例</title>
</head>
<body>
<script>
if(window.matchMedia("(max-width: 767px)").matches){
document.write("這是一個(gè)移動(dòng)設(shè)備。");
}else {
document.write("這是平板電腦或臺(tái)式電腦。");
}
</script>
</body>
</html>
這里我們寫(xiě)了一個(gè)屏幕大小判斷，通過(guò)matchMedia方法來(lái)匹配給定的最大寬度尺寸（767px）。當(dāng)獲取的當(dāng)前屏幕即窗口大小，小于767像素時(shí)，就判斷為“這是一個(gè)移動(dòng)設(shè)備。”。相反，大于767像素時(shí)，就判斷為"這是平板電腦或臺(tái)式電腦。"。
判斷結(jié)果如下：
當(dāng)前屏幕寬度大于767px時(shí)：
當(dāng)前屏幕小于767px時(shí)：
matchMedia() 返回一個(gè)新的 MediaQueryList 對(duì)象，表示指定的媒體查詢字符串解析后的結(jié)果。matchMedia() 方法的值可以是任何一個(gè) css @media 規(guī)則 的特性, 如 min-height, min-width, orientation 等。
MediaQueryList 對(duì)象有以下兩個(gè)屬性：
media：查詢語(yǔ)句的內(nèi)容。
matches：用于檢測(cè)查詢結(jié)果，如果文檔匹配 media query 列表，值為 true，否則為 false。
本篇文章就是關(guān)于JS判斷屏幕大小的方法介紹，簡(jiǎn)單易懂，希望對(duì)需要的朋友有所幫助！
