浏览器窗体高度，如何获取浏览器窗口的高度？

1. 引言

获取浏览器窗口高度是网页开发中经常用到的操作之一，可以通过一些简单的JavaScript代码实现。在浏览器窗口高度获取这个问题上，我们需要考虑一些细节，比如支持哪些浏览器、如何兼容移动端等。在本文中，我们会详细地介绍如何获取浏览器窗口高度。

2. 浏览器窗口高度的定义

浏览器窗口高度指的是浏览器可视区域的高度，也就是不包括工具栏和状态栏之类的东西。它是一个动态变化的值，在用户改变浏览器窗口大小的时候也会随之改变。

3. 获取浏览器窗口高度的方法

要获取浏览器窗口的高度，我们可以使用JavaScript来实现。下面是两种可供选择的方法：

方法一：使用window.innerHeight属性

window.innerHeight是 window 对象的一个属性，可以返回浏览器窗口的高度。这个属性的兼容性比较好，在现代浏览器中都可以使用。

代码示例：

```

var windowHeight = window.innerHeight;

console.log(windowHeight);

```

方法二：使用document.documentElement.clientHeight属性

在一些旧版的浏览器中，window.innerHeight属性可能无法使用。此时，我们可以使用 document.documentElement.clientHeight 这个属性来获取浏览器窗口高度。

代码示例：

```

var windowHeight = document.documentElement.clientHeight;

console.log(windowHeight);

```

4. 如何兼容移动端

在移动设备上获取浏览器窗口高度的方法与在PC端略有不同。因为移动端的屏幕尺寸非常多样化，所以不能简单地使用上面的方法来获取窗口高度。下面是一个可以兼容移动端的获取窗口高度的方法：

代码示例：

```

function getClientHeight(){

var clientHeight=0;

if(document.body.clientHeight&&document.documentElement.clientHeight){

clientHeight = (document.body.clientHeight

}else{

clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;

}

return clientHeight;

}

console.log(getClientHeight());

```

5. 浏览器兼容性问题

虽然 window.innerHeight 和 document.documentElement.clientHeight 属性都是可以直接使用的，但在一些老旧的浏览器中可能会出现兼容性问题。比较出名的就是IE6，因为它对CSS盒子模型的支持存在一些问题。

为了解决这个问题，我们可以使用 document.compatMode 属性来判断页面使用的是哪种模式（标准模式或混杂模式）。

代码示例：

```

var clientHeight = document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;

```

6. 总结

在本篇文章中，我们介绍了如何获取浏览器窗口的高度，涵盖了常规PC端和移动端的实现方式。同时，我们还讲解了一些相关兼容性问题，以及如何通过一些判断语句来解决这些问题。希望能对您有所帮助。

参考：如何获取浏览器窗体高度

文章TAG：浏览  浏览器  窗体  高度  浏览器窗体高度