一篇文章帶你了解JavaScript window screen

作者：前端進階者 2023-06-09 15:25:39

開發前端

window.screen 對象可以不用窗口window前綴書寫。下面用豐富的案例講解相關內容。

一、什么是window.screen？

window.screen 對象包含有關用戶屏幕的信息。

二、窗口屏幕屬性

window.screen 對象可以不用窗口window前綴書寫。下面用豐富的案例講解相關內容。

1. 窗口的屏幕寬度

screen.width 屬性返回訪問者屏幕的像素寬度。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>項目</title>
    </head>
    <body style="background-color: aqua;">


        <p id="demo"></p>


        <script>
            document.getElementById("demo").innerHTML =
                "屏幕寬度 ：" + screen.width;
</script>


    </body>
</html>

2. 窗口的屏幕高度

screen.height 屬性返回訪問者屏幕的像素高度。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>項目</title>
    </head>
    <body style="background-color: aqua;">


        <p id="demo"></p>


        <script>
            document.getElementById("demo").innerHTML =
                "屏幕高度 ：" + screen.height;
</script>


    </body>
</html>

3. 窗口可用寬度

screen.availWidth 屬性返回訪問者的屏幕寬度，以像素為單位，減去的界面功能，如Windows任務欄。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>項目</title>
    </head>
    <body style="background-color: aqua;">


        <p id="demo"></p>


        <script>
            document.getElementById("demo").innerHTML =
                "Available Screen Width: " + screen.availWidth;
</script>


    </body>
</html>

4. 窗口可用高度

screen.availHeight 屬性返回訪問者屏幕高度，以像素為單位，減去的界面功能，如Windows任務欄。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>項目</title>
    </head>
    <body style="background-color: aqua;">


        <p id="demo"></p>


        <script>
            document.getElementById("demo").innerHTML =
                "Screen height is " + screen.height;
</script>


    </body>

5. 窗口顏色深度

解析：

screen.colorDepth 屬性返回用于顯示一個顏色的位數。所有現代計算機使用24位或32位硬件彩色分辨率。

24 bits = 16,777,216 種不同 "True Colors"。
32 bits = 4,294,967,296 種不同 "Deep Colors"。

舊電腦使用16位：65536種不同的“高色”分辨率。很舊的電腦，和舊手機用8位：256種不同的“VGA顏色”。

例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>項目</title>
    </head>
    <body style="background-color: aqua;">


        <p id="demo"></p>


        <script>
            document.getElementById("demo").innerHTML =
                "Screen color depth is " + screen.colorDepth;
</script>




    </body>
</html>

注：

#rrggbb (rgb)` 用于HTML值代表 "True Colors" (16,777,216 different colors)。

6. 窗口像素深度

screen.pixelDepth 屬性返回屏幕的像素深度。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>項目</title>
</head>
<body>


  <p id="demo"></p>


  <script>
  document.getElementById("demo").innerHTML =
  "Screen pixel depth is " + screen.pixelDepth;
</script>


</body>
</html>

三、總結

本文主要介紹了JavaScript window screen（屏幕窗口屬性），詳細的介紹了屏幕的高度和寬度如何在頁面實現的效果。屏幕窗口顏色，像素深度的效果。通過小項目的展示，運行效果圖的展示，希望幫助大家更好理解。

希望大家可以根據文章的內容，積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。

使用JavaScript 語言，方便大家更好理解，希望對大家的學習有幫助。

責任編輯：華軒來源：前端進階學習交流

JavaScript 窗口屏幕