正文

JavaScript 获取屏幕高度全攻略：简单一招，掌握各种设备屏幕尺寸！

/0 浏览量
0423

在开发网页应用时，了解和获取屏幕尺寸是非常重要的，因为它可以帮助我们更好地布局和设计界面。JavaScript 提供了多种方法来获取屏幕的高度，下面我将详细讲解这些方法，并给出相应的示例代码。

1. 使用 window.innerHeight

这是最常用的方法之一。window.innerHeight 属性可以获取到浏览器视口（viewport）的高度，不包括滚动条。

// 获取屏幕高度
var screenHeight = window.innerHeight;
console.log("屏幕高度：" + screenHeight + "像素");

2. 使用 document.documentElement.clientHeight

这个方法可以获取到整个文档的高度，包括视口高度和滚动条。

// 获取文档高度
var documentHeight = document.documentElement.clientHeight;
console.log("文档高度：" + documentHeight + "像素");

3. 使用 document.body.clientHeight

这个方法与 document.documentElement.clientHeight 类似，但只获取到 <body> 元素的高度。

// 获取body元素高度
var bodyHeight = document.body.clientHeight;
console.log("body元素高度：" + bodyHeight + "像素");

4. 使用 window.screen.height

这个方法可以获取到整个屏幕的高度，包括任务栏、工具栏等。

// 获取屏幕高度
var screenHeight = window.screen.height;
console.log("屏幕高度：" + screenHeight + "像素");

5. 使用 CSS媒体查询

除了JavaScript，我们还可以使用CSS媒体查询来获取屏幕高度。这对于响应式设计非常有用。

/* 当屏幕宽度小于768px时 */
@media (max-width: 768px) {
  body {
    height: 100vh; /* 100%的视口高度 */
  }
}

6. 示例：动态调整布局

以下是一个示例，演示如何根据屏幕高度动态调整布局。

function adjustLayout() {
  var screenHeight = window.innerHeight;
  if (screenHeight < 600) {
    // 调整布局，适用于小屏幕
    console.log("小屏幕布局");
  } else {
    // 调整布局，适用于大屏幕
    console.log("大屏幕布局");
  }
}

// 监听窗口大小变化
window.addEventListener("resize", adjustLayout);

// 初始化布局
adjustLayout();

总结

以上是关于JavaScript获取屏幕高度的方法和示例。通过这些方法，我们可以轻松地获取到屏幕高度，并根据需要调整布局。希望这篇文章能帮助到你！

-- 展开阅读全文 --