JS 屏幕高度|极客笔记

JS 屏幕高度

在网页开发中，获取屏幕的高度是一项常见的操作，特别是在响应式设计中。JavaScript 提供了一种简单且有效的方法来获取屏幕的高度，这样我们就可以根据屏幕的高度来调整网页内容的布局和样式。

在 JavaScript 中，我们可以使用 window.innerHeight 属性来获取浏览器窗口的视口高度，也就是浏览器实际用来显示网页内容的高度，不包括浏览器工具栏和滚动条。

下面是一个简单的示例代码，演示如何使用 window.innerHeight 属性获取屏幕的高度：

const screenHeight = window.innerHeight;
console.log("屏幕高度为：" + screenHeight + "px");

当你在浏览器中运行上面的代码时，会输出当前窗口的高度，单位为像素(px)。你可以尝试缩放浏览器窗口，然后再次运行代码，查看窗口高度的变化。

除了在初始化页面时获取屏幕高度外，我们还可以通过监听窗口大小的变化来实时获取屏幕的高度。这样可以在用户调整窗口大小时动态调整页面布局。

下面是一个示例代码，通过监听 resize 事件实时获取屏幕的高度：

window.addEventListener("resize", function() {
    const screenHeight = window.innerHeight;
    console.log("屏幕高度为：" + screenHeight + "px");
});

上面的代码中，我们使用 addEventListener 方法监听了窗口的 resize 事件，每当窗口大小发生变化时，就会执行函数内部的代码，即获取新的屏幕高度并输出到控制台。

获取屏幕高度在网页开发中有许多应用场景，下面列举了一些常见的情况：

在响应式设计中，根据不同屏幕高度来调整页面的布局是非常重要的。通过获取屏幕高度，我们可以根据不同的屏幕大小来设置样式，以确保页面在不同设备上都能正常显示。

懒加载是一种优化网页性能的技术，可以延迟加载部分页面内容，以降低加载时间。通过获取屏幕高度，我们可以判断用户浏览的位置，当用户滚动页面时，再加载屏幕可见区域内的内容，提升用户体验。

在某些情况下，我们需要将元素绝对定位在屏幕底部或顶部。通过获取屏幕高度，我们可以计算元素距离屏幕顶部或底部的距离，从而实现需要的布局效果。

通过 JavaScript 获取屏幕高度是一项常见且必要的操作，在网页开发中有许多应用场景。我们可以使用 window.innerHeight 属性来获取屏幕的高度，并通过监听窗口大小变化来实时获取屏幕高度。通过获取屏幕高度，我们可以根据不同设备的屏幕大小来调整页面布局，优化用户体验。