一篇文章带你了解JavaScript window screen

原创
09/18 09:51
阅读数 1K
点击上方“ 前端进阶学习交流 ”,进行关注

回复“前端”即可获赠前端相关学习资料

忽如一夜春风来,千树万树梨花开。

一、什么是window.screen?

window.screen 对象包含有关用户屏幕的信息。

二、窗口屏幕属性

window.screen 对象可以不用窗口window前缀书写。下面用丰富的案例讲解相关内容。

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 属性返回用于显示一个颜色的位数。所有现代计算机使用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>

三、总结

本文主要介绍了JavaScript  window screen(屏幕窗口属性),详细的介绍了屏幕的高度和宽度如何在页面实现的效果。屏幕窗口颜色,像素深度的效果。通过小项目的展示,运行效果图的展示,希望帮助大家更好理解。

希望大家可以根据文章的内容,积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

使用JavaScript 语言,方便大家更好理解,希望对大家的学习有帮助。

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

往期精彩文章推荐:

欢迎大家点赞,留言,转发,转载,感谢大家的相伴与支持

想加入前端学习群请在后台回复【入群

万水千山总是情,点个【在看】行不行

本文分享自微信公众号 - 前端进阶学习交流(gh_cf4e462f0835)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部