JavaScript 中 window.screen 对象的属性是什么?
在本教程中，我们将讨论 JavaScript 中 window.screen 对象的属性。
窗口属于浏览器对象模型 - BOM。窗口的屏幕对象保存有关用户屏幕的信息。由于窗口对象的范围很高，我们也可以将窗口的屏幕对象写为"screen"。
屏幕对象没有直接方法。该对象的用途是改善网页的 UI 体验。
window.screen 对象的属性
availHeight
availHeight 属性返回屏幕高度，不包括 Windows 任务栏。
availWidth
availWidth 属性返回屏幕宽度，不包括 Windows 任务栏。我们可以使用此属性来决定包含在文档中的图像的大小或创建多个浏览器窗口。
colorDepth
colorDepth 属性返回用于图像显示的调色板的位深度。
窗口的 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
左侧属性返回主屏幕左侧到现有屏幕左侧的距离(以像素为单位)。
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
在此示例中，我们按照上述语法访问屏幕对象的可用属性。
<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>
在本教程中，我们讨论了窗口的屏幕对象及其属性。为了增强用户的 UI 体验，我们可以在网页上使用此对象。
