1 Fork me on GitHub

33. JS Screen对象：获取屏幕信息

1. 前言

JavaScript screen 对象中包含了有关计算机屏幕的信息，例如分辨率、宽度、高度等，我们可以通过 window 对象的 screen 属性来获取它。由于 window 对象是一个全局对象，因此在使用window.screen时可以省略 window 前缀，例如window.screen.width可以简写为screen.width。

2. screen 对象中的属性

下表中列举了 JavaScript screen 对象中常用的属性及其描述：

属性说明
availTop 返回屏幕上方边界的第一个像素点（大多数情况下返回 0）
availLeft 返回屏幕左边边界的第一个像素点（大多数情况下返回 0）
availHeight 返回屏幕的高度（不包括 Windows 任务栏）
availWidth 返回屏幕的宽度（不包括 Windows 任务栏）
colorDepth 返回屏幕的颜色深度（color depth），根据 CSSOM（CSS 对象模型）视图，为兼容起见，该值总为 24。
height 返回屏幕的完整高度
pixelDepth 返回屏幕的位深度/色彩深度（bit depth），根据 CSSOM（CSS 对象模型）视图，为兼容起见，该值总为 24
width 返回屏幕的完整宽度
orientation 返回当前屏幕的方向


示例代码如下：

?
1
2
3
4
5
6
7
8
9
document.write(screen.availTop + "<br>");   // 输出：0
document.write(screen.availLeft + "<br>");  // 输出：0
document.write(screen.availHeight + "<br>");// 输出：1050
document.write(screen.availWidth + "<br>"); // 输出：1920
document.write(screen.height + "<br>");     // 输出：1080
document.write(screen.width + "<br>");      // 输出：1920
document.write(screen.colorDepth + "<br>"); // 输出：24
document.write(screen.pixelDepth + "<br>"); // 输出：24
console.log(screen.orientation);            // 输出：ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}

3. 获取屏幕的宽度和高度

您可以使用 screen 对象的 width 和 height 属性来获取用户计算机屏幕的宽度和高度（单位为像素），示例代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <button type="button" onclick="getResolution();">获取屏幕的宽度和高度</button>
    <script type="text/javascript">
        function getResolution() {
            alert("您计算机屏幕的尺寸为：" + screen.width + "x" + screen.height);
        }
    </script>
</body>
</html>

运行结果如下图所示：

JS screen 对象获取屏幕的宽度和高度
图1：获取屏幕的宽度和高度

4. 获取屏幕的颜色深度

您可以使用 screen 对象的 colorDepth 属性来获取用户计算机屏幕的颜色深度，示例代码如下：

提示：颜色深度表示屏幕能够产生多少中颜色，例如，颜色深度为 8 的屏幕可以产生 256 种颜色（即 28），目前大部分屏幕的颜色深度为 24 或 32，一些较旧的显示器的颜色深度为 8 或 16。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <button type="button" onclick="getColorDepth();">获取颜色深度</button>
    <script type="text/javascript">
        function getColorDepth() {
            alert("您计算机屏幕的颜色深度为：" + screen.colorDepth);
        }
    </script>
</body>
</html>

运行结果如下图所示：

JS screen 对象获取屏幕的颜色深度
图2：获取屏幕的颜色深度

 

posted @   v_jjling  阅读(245)  评论(0)  编辑  收藏  举报
相关博文：
·  32. JS Navigator对象：获取浏览器信息
·  31. JS BOM（浏览器对象模型）
·  JS方法——screen（屏幕信息）
·  JS Window Screen
·  JavaScript中的screen对象和navigator对象
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳，地球，月球 运作规律
· 上周热点回顾（3.3-3.9）
AmazingCounters.com
点击右上角即可分享
微信分享提示
AI IDE Trae