在 JavaScript 中獲取視口尺寸

Shraddha Paghdar 2023年1月30日 2022年5月10日
  1. 在 JavaScript 中使用 window.innerWidth 獲取視口寬度
  2. 在 JavaScript 中使用 document.documentElement.clientWidth 獲取視口寬度
在 JavaScript 中獲取視口尺寸

瀏覽器視口是可以檢視網頁內容的視窗區域。本文將學習如何在 JavaScript 中獲取 Viewport Dimension。

Javascript 提供了兩種方法來找出裝置的視口。

  • 使用 window.innerWidthwindow.innerHeight
  • 使用 document.documentElement.clientWidth.clientHeight

在 JavaScript 中使用 window.innerWidth 獲取視口寬度

視窗的只讀 innerWidth 屬性返回視窗的內部寬度(以畫素為單位)。這包括垂直滾動條的寬度

視窗的內部高度可以從 innerHeight 屬性獲得。

語法:

let intViewportWidth = window.innerWidth;

一個整數值表示視窗布局 viewport 的寬度(以畫素為單位)。此屬性沒有預設值並且是隻讀的。

要更改視窗的寬度,請使用視窗的方法之一來更改視窗的大小,例如 resizeBy()resizeTo()

有關 window.innerWidth 的更多資訊。

function resizeEventListener() {
  console.log("innerHeight",window.innerHeight);
  console.log("innerWidth", window.innerWidth);
}

window.addEventListener("resize", resizeEventListener);

我們在調整瀏覽器視窗大小之前和之後計算視窗的內部高度和寬度。

要獲得減去滾動條和邊框的視窗寬度,請改用 clientWidth 屬性。結果可能因視窗而異。

輸出:

// Before resize
"innerHeight", 219
"innerWidth", 1326
// After resize
"innerHeight", 166
"innerWidth", 974

在 JavaScript 中使用 document.documentElement.clientWidth 獲取視口寬度

對於內聯專案和沒有 CSS 的元素,屬性 element.Clientwidth 為零;否則,它是以畫素為單位的元素的內部寬度。

包括內邊距,但不包括邊框、邊距和垂直滾動條。

當在根元素上使用 clientWidth 或文件處於 quirks mode 時,將返回視口的寬度,不包括滾動條。

語法:

var intElemClientWidth = element.clientWidth;

intElemClientWidth 是一個整數值,表示元素的 clientWidth(以畫素為單位)。clientWidth 屬性是隻讀的。

更多資訊請見 element.clientWidth

function resizeEventListener() {
  console.log("clientWidth", document.documentElement.clientWidth);
  console.log("clientHeight", document.documentElement.clientHeight);
}
window.addEventListener("resize", resizeEventListener);

我們計算客戶的內部高度和寬度。

輸出:

// Before resize
"clientWidth", 1326
"clientHeight", 219
// After resize
"clientWidth", 974
"clientHeight", 166

要檢視結果,請單擊此處

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn