在 JavaScript 中獲取瀏覽器寬度

Abid Ullah 2023年1月30日 2022年5月10日
  1. JavaScript 中在瀏覽器控制檯中使用一行程式碼獲取寬度
  2. 在 JavaScript 中使用 inner.widthinner.height 獲取瀏覽器寬度和高度
在 JavaScript 中獲取瀏覽器寬度

瀏覽器寬度以畫素為單位顯示瀏覽器視窗的實際寬度。瀏覽器寬度與螢幕寬度不同。

它顯示了可檢視瀏覽器空間中的畫素數,螢幕寬度是螢幕的總大小(以畫素為單位)。

JavaScript 中在瀏覽器控制檯中使用一行程式碼獲取寬度

首先,開啟瀏覽器控制檯並將以下程式碼複製貼上到瀏覽器控制檯中。

瀏覽器的寬度總是小於或等於螢幕的寬度,因為它不包括滾動條和邊框。

"Browser width: " + window.innerWidth + " pixels\nScreen width: " + screen.width + " pixels";

輸出:

'Browser width: 982 pixels\nScreen width: 1536 pixels'

使用瀏覽器控制檯中的一行程式碼獲取瀏覽器寬度

在 JavaScript 中使用 inner.widthinner.height 獲取瀏覽器寬度和高度

我們將建立一個 HTML 頁面,在其中我們將在程式碼主體內編寫指令碼。

在指令碼部分,我們將編寫一段程式碼,在輸出中顯示瀏覽器的內部寬度。

當我們執行 HTML 程式碼時,會在瀏覽器中開啟一個頁面。我們在指令碼中使用 alert 方法在頁面上顯示訊息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Browser width</title>
    <h1>Getting width in HTML page</h1>
</head>
<body>
    <p id="demo"></p>
    <script>
        var w = window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;
        var h = window.innerHeight
        || document.documentElement.clientHeight
        || document.body.clientHeight;
        var x = document.getElementById("demo");
        x.innerHTML = "Your Browser inner window width: " + w + ", height: " + h + ".";
        alert("Your Browser inner window width: " + w + ", height: " + h + ".");
        </script>
</body>
</html>

顯示訊息將顯示瀏覽器的內部寬度和高度。在這種情況下,寬度和高度是預設值。

但是當我們改變瀏覽器的寬度時。顯示訊息將顯示瀏覽器的不同寬度和高度。

輸出:

Your Browser inner window width: 362, height: 450.

inner.width 為我們提供了瀏覽器的內部寬度。inner.height 為我們提供了瀏覽器的內部高度。

頁面顯示瀏覽器預設寬高

頁面顯示瀏覽器的不同寬度和高度

Author: Abid Ullah
Abid Ullah avatar Abid Ullah avatar

My name is Abid Ullah, and I am a software engineer. I love writing articles on programming, and my favorite topics are Python, PHP, JavaScript, and Linux. I tend to provide solutions to people in programming problems through my articles. I believe that I can bring a lot to you with my skills, experience, and qualification in technical writing.

LinkedIn

相關文章 - JavaScript Browser