在 JavaScript 中獲取視口尺寸

1. 在 JavaScript 中使用 window.innerWidth 獲取視口寬度
2. 在 JavaScript 中使用 document.documentElement.clientWidth 獲取視口寬度

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

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

• 使用 window.innerWidth 和 window.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

要檢視結果，請單擊此處。