一篇文章带你了解JavaScript window screen

最新推荐文章于 2022-04-21 14:24:08 发布

大前端圈

最新推荐文章于 2022-04-21 14:24:08 发布

阅读量516

点赞数 1

文章标签：项目管理 css 编程语言 window html

原文链接：https://mp.weixin.qq.com/s?__biz=Mzg5NDA2NDc2Mg==\x26amp;mid=2247485237\x26amp;idx=1\x26amp;sn=78c9ded2329484ff2f004f6e31fba1ec\x26amp;chksm=c0240620f

版权

点击上方“大前端圈”，进行关注

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

今

日

鸡

汤

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

一、什么是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 语言，方便大家更好理解，希望对大家的学习有帮助。

本公众号全部博文已经整理成一个目录，请在公众号里回复[m]获取！

推荐阅读
那个从深圳流水线工人去Google上班程序媛，最近失业了！阿里正式取消周报：打击低效加班，拒绝形式主义！什么是a站、b站、c站、d站、e站、f站、g站、h站、i站、j站、k站、l站、m站、n站…z站？中国程序员VS美国程序员，太形象了...

提升效率，必须推荐这12款谷歌插件！

有个程序员老公到底有多爽？？？

如何破解“仅三天可见”的朋友圈？

欢迎扫描加我微信一起交流基金理财知识，技术，项目管理
当前有哪些投资机会？可转债打新，怎么参与？风险怎么样？怎么操作？欢迎加入免费知识星球
同800+朋友们交流～





如有收获，点个在看，诚挚感谢♡

大前端圈

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一篇文章带你了解JavaScript window screen

点击上方“大前端圈”，进行关注回复“前端”即可获赠前端相关学习资料今日鸡汤忽如一夜春风来，千树万树梨花开。一、什么是window.screen？window.screen 对象包含有关用...
复制链接

扫一扫