获取屏幕高度的js方法，完成响应式布局！！

关注

原创最新推荐文章于 2025-06-26 09:05:18 发布 7.7k 阅读 AI 写同款· GEO 优化 ›

在前端开发中，获取屏幕高度是一个基本操作。因为这可以帮助我们在设计响应式页

面时，确定元素在各种大小的屏幕上的布局。在本文中，我们将介绍获取屏幕高度的几种

常见方法。

方法一：使用

window.innerHeight

属性返回的是视口（即浏览器窗口）的高度，其中包含浏览器

窗口的边框，但不包括工具栏和滚动条等。因此，可以使用如下的

JavaScript

代码来获取

屏幕高度：

```
javascript 

let screenHeight = window.innerHeight; 

console.log(screenHeight); 

```

这段代码将屏幕高度保存在

screenHeight

变量中，然后将其打印到控制台上。

方法二：使用

document.documentElement.clientHeight

还有一个获取屏幕高度的方法是使用，

document.body.clientHeight

属性，该属性返回得是body元素得高度，不包括body 元素得外边距、边框和内边距。如果body元素的高度不足以填充整个视口，则该属性将返回视口的高度。

最后，我们可以使用

screen.height

属性来获取屏幕的实际高度。但是需要注意的是，该属性返回的是屏幕的物理高度，可能会受到操作系统缩放和分辨率等因素的影响。

总结：

以上方法都可以用来获取屏幕高度，具体使用那种方法取决于具体情况。他们的区别在于返回的值不同，因为它们使用的是不同的对象。根据实际需要选择合适的方法来获取屏幕高度，以便在响应式页面设计中进行布局和响应。

标签

#javascript #前端 #开发语言

本内容遵循 CC 4.0 BY-SA 版权协议