JavaScript 中的 window.screen 对象有哪些属性？

在本教程中，我们将讨论 JavaScript 中 window.screen 对象的属性。

window 属于浏览器对象模型 (BOM)。window 的 screen 对象包含有关用户屏幕的信息。由于 window 对象的作用域较高，我们也可以将 window 的 screen 对象写成“screen”。

screen 对象没有直接的方法。该对象的作用是改善网页的用户界面体验。

window.screen 对象的属性

availHeight

availHeight 属性返回屏幕高度，不包括 Windows 任务栏。

availWidth

availWidth 属性返回屏幕宽度，不包括 Windows 任务栏。我们可以使用此属性来确定要包含在文档中的图像的大小，或创建多个浏览器窗口。

colorDepth

colorDepth 属性返回图像显示的颜色调色板的位深度。

window 的 screen 属性表示颜色数量的以 2 为底的对数。颜色深度表示设备屏幕可以生成的颜色的数量。更多的位产生更多的颜色变化。

24 位几乎总是使用 R、G 和 B 的每种 8 位。在 32 位颜色深度中，24 位用于颜色，剩余的 8 位用于透明度。

24 位 = 16,777,216 种不同的“真彩色”。32 位 = 4,294,967,296 种不同的“深色”。

早期的系统有 16 位 = 65,536 种不同的“高色”分辨率。非常旧的系统和旧的手机有 8 位 = 256 种不同的“VGA 颜色”。所有现代系统都使用 24 位或 32 位硬件进行颜色分辨率。

height

height 属性返回屏幕的总高度。

pixelDepth

pixelDepth 属性返回屏幕的颜色分辨率（以每像素位数表示）。

对于现代设备，颜色深度和像素深度相同。

width

width 属性返回屏幕的总宽度。

availTop

availTop 属性返回未分配给永久或半永久用户界面功能的第一个像素的 y 坐标。

availLeft

availLeft 属性返回屏幕左侧可用的第一个像素。

left

left 属性返回从主屏幕左侧到现有屏幕左侧的像素值距离。

orientation

orientation 属性返回与屏幕关联的 ScreenOrientation 实例。

top

top 属性返回从当前屏幕顶部到屏幕顶部的像素距离。

用户可以按照以下语法访问这些属性。

语法

screen.width
screen.height
screen.availWidth
screen.availHeight
screen.colorDepth
screen.pixelDepth
screen.availTop
screen.availLeft
screen.left
screen.orientation
screen.top

使用此语法，我们可以访问可用的屏幕属性。

示例 1

在此示例中，我们像上面语法中那样访问 screen 对象的可用属性。

<html>
<body>
   <h2>Getting the window’s screen object's properties</i></h2>
   <div id = "btnWrap">
      <p>Click the button to view the screen object's properties</p>
      <button onclick = "getScreenProp()"> Click Me </button>
   </div>
   <div id = "dispDom"></div>
   <script>
      var btnObj = document.getElementById("btnWrap");
      var dispObj = document.getElementById("dispDom");
      var dispStr = "";
      function getScreenProp()
      {
         btnObj.style.display = "none";
         dispStr += "<br/>screen.width: "+screen.width;
         dispStr += "<br/>screen.height: "+screen.height;
         dispStr += "<br/>screen.availWidth: "+screen.availWidth;
         dispStr += "<br/>screen.availHeight: "+screen.availHeight;
         dispStr += "<br/>screen.colorDepth: "+screen.colorDepth;
         dispStr += "<br/>screen.pixelDepth: "+screen.pixelDepth;
         dispStr += "<br/>screen.availTop: "+screen.availTop;
         dispStr += "<br/>screen.availLeft: "+screen.availLeft;
         dispObj.innerHTML = dispStr;
      }
   </script>
</body>
</html>

示例 2

在此示例中，我们使用屏幕宽度、屏幕高度和窗口像素比率来计算移动屏幕分辨率。

<html>
<body>
   <h2>Gettting the native screen resolution using window’s screen object's properties</h2>
   <div id = "resBtnWrap">
      <p>Click the button to get the native screen resolution</p>
      <button onclick = "getScreenResolution()">Click Me</button>
   </div>
   <div id = "resDispDom">
   <script>
      var resBtnObj = document.getElementById("resBtnWrap");
      var resDispObj = document.getElementById("resDispDom");
      var resDispStr = "";
      function getScreenResolution()
      {
         //resBtnObj.style.display = "none";
         resDispStr += (window.screen.width * window.devicePixelRatio) + " X " + (window.screen.height * window.devicePixelRatio);
         resDispObj.innerHTML = "Your screen resolution is <b>" + resDispStr + "</b>";
      }
   </script>
</body>
</html>

在本教程中，我们讨论了 window 的 screen 对象及其属性。为了增强用户的 UI 体验，我们可以在网页上使用此对象。

更新时间： 2022 年 10 月 31 日

427 次浏览

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告