一篇文章帶你瞭解JavaScript window screen

點擊上方「 前端進階學習交流 」，進行關注

回覆「前端」便可獲贈前端相關學習資料html

今前端

日web

雞數組

湯微信

忽如一晚上春風來，千樹萬樹梨花開。

1、什麼是window.screen？

window.screen 對象包含有關用戶屏幕的信息。app

2、窗口屏幕屬性

window.screen 對象能夠不用窗口window前綴書寫。下面用豐富的案例講解相關內容。less

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 屬性返回訪問者屏幕的像素高度。ide

<!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 屬性返回用於顯示一個顏色的位數。全部現代計算機使用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>

3、總結

本文主要介紹了JavaScript window screen（屏幕窗口屬性），詳細的介紹了屏幕的高度和寬度如何在頁面實現的效果。屏幕窗口顏色，像素深度的效果。經過小項目的展現，運行效果圖的展現，但願幫助你們更好理解。

但願你們能夠根據文章的內容，積極嘗試，有時候看到別人實現起來很簡單，可是到本身動手實現的時候，總會有各類各樣的問題，切勿眼高手低，勤動手，才能夠理解的更加深入。

使用JavaScript 語言，方便你們更好理解，但願對你們的學習有幫助。

------------------- End -------------------

往期精彩文章推薦：

歡迎你們點贊，留言，轉發，轉載，感謝你們的相伴與支持

想加入前端學習羣請在後臺回覆【入羣】

萬水千山老是情，點個【在看】行不行

本文分享自微信公衆號 - 前端進階學習交流（gh_cf4e462f0835）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。