一篇文章帶你了解JavaScript window screen
一、什么是window.screen？
window.screen 對(duì)象包含有關(guān)用戶屏幕的信息。
二、窗口屏幕屬性
window.screen 對(duì)象可以不用窗口window前綴書(shū)寫(xiě)。下面用豐富的案例講解相關(guān)內(nèi)容。
1. 窗口的屏幕寬度
screen.width 屬性返回訪問(wèn)者屏幕的像素寬度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項(xiàng)目</title>
</head>
<body style="background-color: aqua;">
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"屏幕寬度 ：" + screen.width;
</script>
</body>
</html>
2. 窗口的屏幕高度
screen.height 屬性返回訪問(wèn)者屏幕的像素高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項(xiàng)目</title>
</head>
<body style="background-color: aqua;">
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"屏幕高度 ：" + screen.height;
</script>
</body>
</html>
3. 窗口可用寬度
screen.availWidth 屬性返回訪問(wèn)者的屏幕寬度，以像素為單位，減去的界面功能，如Windows任務(wù)欄。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項(xiàng)目</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 屬性返回訪問(wèn)者屏幕高度，以像素為單位，減去的界面功能，如Windows任務(wù)欄。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項(xiàng)目</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 屬性返回用于顯示一個(gè)顏色的位數(shù)。所有現(xiàn)代計(jì)算機(jī)使用24位或32位硬件彩色分辨率。
- 24 bits = 16,777,216 種不同 "True Colors"。
- 32 bits = 4,294,967,296 種不同 "Deep Colors"。
舊電腦使用16位：65536種不同的“高色”分辨率。很舊的電腦，和舊手機(jī)用8位：256種不同的“VGA顏色”。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>項(xiàng)目</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>項(xiàng)目</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（屏幕窗口屬性），詳細(xì)的介紹了屏幕的高度和寬度如何在頁(yè)面實(shí)現(xiàn)的效果。屏幕窗口顏色，像素深度的效果。通過(guò)小項(xiàng)目的展示，運(yùn)行效果圖的展示，希望幫助大家更好理解。
希望大家可以根據(jù)文章的內(nèi)容，積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
使用JavaScript 語(yǔ)言，方便大家更好理解，希望對(duì)大家的學(xué)習(xí)有幫助。
