JavaScript - 螢幕物件

視窗螢幕物件

在 JavaScript 中，screen 物件是 'window' 物件的一個屬性。'screen' 物件的屬性包含有關裝置螢幕的資訊。可以使用 window.screen 語法訪問 screen 物件。也可以不使用 window 物件來訪問它。

螢幕物件屬性

screen 物件有很多屬性，可以提供有關螢幕方向、解析度等的詳細資訊。這些屬性可用於開發對不同螢幕尺寸和方向做出響應的應用程式。

以下是 JavaScript screen 物件的一些屬性：

width - 螢幕寬度（以畫素為單位）。
height - 螢幕高度（以畫素為單位）。
availWidth - 螢幕寬度，減去視窗工作列的寬度。
availHeight - 螢幕高度，減去視窗工作列的高度。
colorDepth - 螢幕可以顯示的每畫素位數。
pixelDepth - 螢幕實際使用的每畫素位數。

螢幕物件屬性語法

請遵循以下語法在 JavaScript 中使用 screen 物件的屬性：

window.screen.property;
OR
screen.property;

您可以選擇是否使用 'window' 物件來訪問 screen 物件。

示例

在下面的示例中，我們透過將 screen 作為 window 物件的屬性來訪問 screen 物件的各種屬性。

<html>
<body>
   <p> Screen Information </p>
   <div id = "output"> </div>
   <script>
      document.getElementById("output").innerHTML = 
	  "screen height: " + window.screen.height + "<br>" + 
      "screen width: " + window.screen.width + "<br>" + 
      "screen colorDepth: " + window.screen.colorDepth + "<br>" +
      "screen pixelDepth: " + window.screen.pixelDepth + "<br>" +
      "screen availHeight: " + window.screen.availHeight + "<br>" +
      "screen availWidth: " + window.screen.availWidth;
   </script>
</body>
</html>

輸出

Screen Information
screen height: 864
screen width: 1536
screen colorDepth: 24
screen pixelDepth: 24
screen availHeight: 816
screen availWidth: 1536

示例

在下面的程式碼中，我們訪問 screen 物件的各種屬性並觀察其值。在這個示例中，我們沒有引用 window 物件來訪問 screen 物件。

<html>
<body>
   <p> Screen Information </p>
   <div id = "output"> </div>
   <script>
      document.getElementById("output").innerHTML = 
	  "screen height: " + screen.height + "<br>" + 
      "screen width: " + screen.width + "<br>" + 
      "screen colorDepth: " + screen.colorDepth + "<br>" + 
      "screen pixelDepth: " + screen.pixelDepth + "<br>" + 
      "screen availHeight: " + screen.availHeight + "<br>" + 
      "screen availWidth: " + screen.availWidth;
  </script>
</body>
</html>

輸出

Screen Information
screen height: 864
screen width: 1536
screen colorDepth: 24
screen pixelDepth: 24
screen availHeight: 816
screen availWidth: 1536

請注意，在以上兩個示例中，我們獲得了有關螢幕的相同資訊。

螢幕物件屬性列表

下面，我們介紹了 'screen' 物件的所有屬性及其說明。您需要使用 'screen' 作為引用來訪問這些屬性。

屬性	描述
availHeight	它給出螢幕高度，不包括工作列。
availWidth	它給出螢幕寬度，不包括工作列。
colorDepth	它給出用於顯示影像的顏色調色盤深度。
height	它返回螢幕的總高度。
pixelDepth	它用於獲取螢幕的顏色解析度。
width	獲取螢幕的總寬度。

列印頁面