一篇文章带你了解JavaScript window screen
回复“前端”即可获赠前端相关学习资料
一、什么是window.screen？
window.screen 对象包含有关用户屏幕的信息。
二、窗口屏幕属性
window.screen 对象可以不用窗口window前缀书写。下面用丰富的案例讲解相关内容。
1. 窗口的屏幕宽度
screen.width 属性返回访问者屏幕的像素宽度。
<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 属性返回访问者屏幕的像素高度。
<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任务栏。
<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任务栏。
<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颜色”。
例：
<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 属性返回屏幕的像素深度。
<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>
三、总结
本文主要介绍了JavaScript window screen（屏幕窗口属性），详细的介绍了屏幕的高度和宽度如何在页面实现的效果。屏幕窗口颜色，像素深度的效果。通过小项目的展示，运行效果图的展示，希望帮助大家更好理解。
希望大家可以根据文章的内容，积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。
使用JavaScript 语言，方便大家更好理解，希望对大家的学习有帮助。
------------------- End -------------------
往期精彩文章推荐：
欢迎大家点赞，留言，转发，转载，感谢大家的相伴与支持
想加入前端学习群请在后台回复【入群】
万水千山总是情，点个【在看】行不行
本文分享自微信公众号 - 前端进阶学习交流（gh_cf4e462f0835）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
