在 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