用js怎么获取屏幕高度

用JavaScript获取屏幕高度的方法有：使用window.innerHeight、使用document.documentElement.clientHeight、使用screen.height。接下来，我们将详细介绍其中的一个方法，即使用window.innerHeight来获取屏幕高度。

window.innerHeight 是一个可以直接获取浏览器窗口视口（viewport）高度的属性。它包括了滚动条的高度。这个属性对于响应式设计和动态调整页面布局非常有用。

一、window.innerHeight

1、什么是 window.innerHeight

window.innerHeight 是一个只读属性，它返回窗口的视口高度，即浏览器窗口的高度。这个属性在现代浏览器中被广泛支持，是获取屏幕高度的首选方式。

例子：

var viewportHeight = window.innerHeight;
console.log("Viewport height is: " + viewportHeight + "px");

这个例子展示了如何获取浏览器窗口的高度，并将其输出到控制台。

2、window.innerHeight 的优点和缺点

优点：

简单易用：只需一行代码即可获取视口高度。
实时更新：它会根据浏览器窗口的调整自动更新高度值。
广泛支持：几乎所有现代浏览器都支持这个属性。

缺点：

包括滚动条：返回的高度包括滚动条的高度，这在某些情况下可能不是你所需要的。
移动设备差异：在某些移动设备上，这个值可能会受到浏览器UI的影响，如地址栏的显示和隐藏。

二、document.documentElement.clientHeight

1、什么是 document.documentElement.clientHeight

document.documentElement.clientHeight 返回文档视口的高度，不包括滚动条的高度。这个属性在需要精确计算视口高度时非常有用。

例子：

var viewportHeight = document.documentElement.clientHeight;
console.log("Viewport height is: " + viewportHeight + "px");

这个例子展示了如何获取不包括滚动条的视口高度，并将其输出到控制台。

2、document.documentElement.clientHeight 的优点和缺点

优点：

不包括滚动条：提供了不包括滚动条的视口高度，适合精确计算布局。
准确性：在大多数情况下，比 window.innerHeight 更加准确。

缺点：

浏览器差异：在某些旧版浏览器中，可能会出现兼容性问题。
不实时更新：需要在窗口调整大小事件中手动更新高度值。

三、screen.height

1、什么是 screen.height

screen.height 返回屏幕的总高度，包括任务栏和其他浏览器UI元素的高度。这个属性通常用于获取屏幕的物理高度。

例子：

var screenHeight = screen.height;
console.log("Screen height is: " + screenHeight + "px");

这个例子展示了如何获取屏幕的物理高度，并将其输出到控制台。

2、screen.height 的优点和缺点

优点：

获取物理高度：提供了屏幕的物理高度，适合全屏应用和游戏开发。
跨设备一致性：在不同设备上返回的值一致，适合跨设备设计。

缺点：

不包括视口调整：不包括浏览器窗口的调整，无法反映实际的视口高度。
不适合动态布局：在响应式设计中不太实用。

四、如何选择合适的方法

在实际开发中，选择合适的方法取决于你的具体需求。如果你需要获取浏览器窗口的高度并且包括滚动条的高度，window.innerHeight 是一个很好的选择。如果你需要一个不包括滚动条的高度值，document.documentElement.clientHeight 可能更适合。而 screen.height 则适用于获取屏幕的物理高度，通常用于全屏应用和游戏。

总结：

window.innerHeight：适合动态布局和响应式设计。
document.documentElement.clientHeight：适合需要精确计算视口高度的场景。
screen.height：适合获取屏幕的物理高度，通常用于全屏应用。

五、实际应用示例

1、动态调整元素高度

假设我们有一个需要根据视口高度动态调整高度的元素：

<div id="dynamicElement" style="background-color: lightblue;">This is a dynamic element</div>

我们可以使用 JavaScript 动态调整它的高度：

function adjustElementHeight() {
    var viewportHeight = window.innerHeight;
    document.getElementById('dynamicElement').style.height = viewportHeight + 'px';
}
window.addEventListener('resize', adjustElementHeight);
adjustElementHeight(); // Call it once to set initial height

2、全屏应用

在全屏应用或游戏开发中，我们可能需要使用 screen.height 来获取屏幕的物理高度：

function enterFullScreen() {
    var screenHeight = screen.height;
    var element = document.getElementById('fullScreenElement');
    element.style.height = screenHeight + 'px';
    // Additional full-screen logic
}

3、响应式设计

在响应式设计中，我们可能需要根据视口高度调整页面布局：

function adjustLayout() {
    var viewportHeight = document.documentElement.clientHeight;
    // Adjust layout based on viewportHeight
}
window.addEventListener('resize', adjustLayout);
adjustLayout(); // Call it once to set initial layout

六、跨浏览器兼容性

在实际开发中，我们需要考虑跨浏览器兼容性。虽然现代浏览器大多数都支持这些属性，但在某些旧版浏览器中可能会出现兼容性问题。为了确保兼容性，我们可以使用以下代码：

function getViewportHeight() {
    return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}
var viewportHeight = getViewportHeight();
console.log("Viewport height is: " + viewportHeight + "px");

这个代码片段尝试依次使用 window.innerHeight、document.documentElement.clientHeight 和 document.body.clientHeight 获取视口高度，以确保在所有浏览器中都能正确获取高度值。

综上所述，用JavaScript获取屏幕高度有多种方法，选择合适的方法取决于具体的应用场景。window.innerHeight 是一个简单易用且广泛支持的选项，适合大多数情况。而 document.documentElement.clientHeight 和 screen.height 则提供了更多的精确性和适用性。了解这些方法的优缺点和适用场景，可以帮助你在开发中做出最佳选择。