一篇文章帶你了解JavaScript window screen
作者：前端進階者
window.screen 對象可以不用窗口window前綴書寫。下面用豐富的案例講解相關內(nèi)容。
一、什么是window.screen？
window.screen 對象包含有關用戶屏幕的信息。
二、窗口屏幕屬性
window.screen 對象可以不用窗口window前綴書寫。下面用豐富的案例講解相關內(nèi)容。
1. 窗口的屏幕寬度
screen.width 屬性返回訪問者屏幕的像素寬度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
</head>
<body style="background-color: aqua;">
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"屏幕寬度 ：" + screen.width;
</script>
</body>
</html>
2. 窗口的屏幕高度
screen.height 屬性返回訪問者屏幕的像素高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
</head>
<body style="background-color: aqua;">
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"屏幕高度 ：" + screen.height;
</script>
</body>
</html>
3. 窗口可用寬度
screen.availWidth 屬性返回訪問者的屏幕寬度，以像素為單位，減去的界面功能，如Windows任務欄。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
</head>
<body style="background-color: aqua;">
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Available Screen Width: " + screen.availWidth;
</script>
</body>
</html>
4. 窗口可用高度
screen.availHeight 屬性返回訪問者屏幕高度，以像素為單位，減去的界面功能，如Windows任務欄。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
</head>
<body style="background-color: aqua;">
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Screen height is " + screen.height;
</script>
</body>
5. 窗口顏色深度
解析：
screen.colorDepth 屬性返回用于顯示一個顏色的位數(shù)。所有現(xiàn)代計算機使用24位或32位硬件彩色分辨率。
- 24 bits = 16,777,216 種不同 "True Colors"。
- 32 bits = 4,294,967,296 種不同 "Deep Colors"。
舊電腦使用16位：65536種不同的“高色”分辨率。很舊的電腦，和舊手機用8位：256種不同的“VGA顏色”。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
</head>
<body style="background-color: aqua;">
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Screen color depth is " + screen.colorDepth;
</script>
</body>
</html>
注：
#rrggbb (rgb)` 用于HTML值代表 "True Colors" (16,777,216 different colors)。
6. 窗口像素深度
screen.pixelDepth 屬性返回屏幕的像素深度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項目</title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Screen pixel depth is " + screen.pixelDepth;
</script>
</body>
</html>
三、總結(jié)
本文主要介紹了JavaScript window screen（屏幕窗口屬性），詳細的介紹了屏幕的高度和寬度如何在頁面實現(xiàn)的效果。屏幕窗口顏色，像素深度的效果。通過小項目的展示，運行效果圖的展示，希望幫助大家更好理解。
希望大家可以根據(jù)文章的內(nèi)容，積極嘗試，有時候看到別人實現(xiàn)起來很簡單，但是到自己動手實現(xiàn)的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
使用JavaScript 語言，方便大家更好理解，希望對大家的學習有幫助。
責任編輯：華軒
來源：
前端進階學習交流
