資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律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 體驗，我們可以在網頁上使用此物件。
427 次瀏覽
