js怎样获取浏览器窗口尺寸

最新推荐文章于 2024-04-30 16:57:21 发布

子玉欸

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量803

点赞数 1

分类专栏：前端三剑客使用文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_68299987/article/details/134099877

版权

前端三剑客使用专栏收录该内容

118 篇文章 3 订阅

订阅专栏

在 JavaScript 中，我们可以使用以下方法来获取浏览器窗口尺寸：

1. `window.innerWidth` 和 `window.innerHeight` 属性：用于获取浏览器窗口的内部宽度和高度（也就是不包括滚动条和边框的尺寸）。例如：

var width = window.innerWidth;
var height = window.innerHeight;
console.log('窗口宽度：' + width);
console.log('窗口高度：' + height);

2. `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 属性：用于获取文档的根元素（即 `<html>` 元素）的客户端宽度和高度。这些属性与 `window.innerWidth` 和 `window.innerHeight` 属性相同，但在一些情况下可能会有所不同。例如：

var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
console.log('窗口宽度：' + width);
console.log('窗口高度：' + height);

注意，这些方法获取的是浏览器窗口的尺寸，而不是整个屏幕的尺寸。如果你需要获取整个屏幕的尺寸，可以使用 `screen.width` 和 `screen.height` 属性。

var screenWidth = screen.width;
var screenHeight = screen.height;
console.log('屏幕宽度：' + screenWidth);
console.log('屏幕高度：' + screenHeight);

总结起来，我们可以使用 `window.innerWidth` 和 `window.innerHeight` 属性或 `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 属性来获取浏览器窗口的尺寸，以及使用 `screen.width` 和 `screen.height` 属性来获取整个屏幕的尺寸。

子玉欸

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js怎样获取浏览器窗口尺寸

总结起来，我们可以使用 `window.innerWidth` 和 `window.innerHeight` 属性或 `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 属性来获取浏览器窗口的尺寸，以及使用 `screen.width` 和 `screen.height` 属性来获取整个屏幕的尺寸。注意，这些方法获取的是浏览器窗口的尺寸，而不是整个屏幕的尺寸。
复制链接

扫一扫