一篇文章带你了解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源创计划”，欢迎正在阅读的你也加入，一块儿分享。