在 JavaScript 中获取视口尺寸
-
在 JavaScript 中使用
window.innerWidth
获取视口宽度 -
在 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
要查看结果,请单击此处。
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