JS基本语法-JavaScript中的常用对象7-screen对象，获取计算机的显示特性，包括宽度，高度等

傷城~ 2023-10-01 16:52 28阅读 0赞

#### **简介：** ####

screen对象描述了用户计算机中的各种显示相关的特性，例如，屏幕像素高度，宽度，颜色深度，可用屏幕区域大小等。

screen对象的最常用的使用场景是：

> 需要适配不同的显示比例时。

#### 程序举例： ####

从通过screen对象获取屏幕参数信息。

screen.js

function getScreenParam(){
      console.log(navigator.userAgent);
    
      var h = screen.height;
      var w = screen.width;
      var colorDepth = screen.colorDepth;
      var res= "高度：" + h + ";   宽度：" + w + ";   颜色深度：" + colorDepth;
      document.getElementById("screen_data").innerHTML = res;
      
    }

screen.html:

<!DOCTYPE html>
    <html>
    <body>
    	<script src="./screen.js"></script>
    
    <h1>window.screen对象的属性</h1>
    <p id="screen_data"></p>
    
    <script>
    	getScreenParam();
    </script>
    </body>
    </html>

运行结果（我的浏览器中的运行结果如下）：

> **window.screen对象的属性**
> 
> 高度：1080; 宽度：1920; 颜色深度：24

#### screen的属性和方法： ####

####    属性： ####

>  *  screen.width：屏幕宽度，单位：像素；
>  *  screen.height：屏幕高度，单位：像素；
>  *  screen.availWidth：屏幕的可用宽度，单位：像素；
>  *  screen.availHeight：屏幕的可用高度，单位：像素；
>  *  screen.colorDepth：屏幕的颜色深度（所有现代计算机都使用 24 位或 32 位硬件的色彩分辨率）；
>  *  screen.pixelDepth：像素深度（现代计算机的颜色深度和像素深度的值是一样的）。