关于获取各种浏览器可见窗口大小的一点点研究
<script>
function getInfo(){
var s = “”;
s += ” 网页可见区域宽：”+ document.body.clientWidth;
s += ” 网页可见区域高：”+ document.body.clientHeight;
s += ” 网页可见区域宽：”+ document.body.offsetWidth + ” (包括边线和滚动条的宽)”;
s += ” 网页可见区域高：”+ document.body.offsetHeight + ” (包括边线的宽)”;
s += ” 网页正文全文宽：”+ document.body.scrollWidth;
s += ” 网页正文全文高：”+ document.body.scrollHeight;
s += ” 网页被卷去的高(ff)：”+ document.body.scrollTop;
s += ” 网页被卷去的高(ie)：”+ document.documentElement.scrollTop;
s += ” 网页被卷去的左：”+ document.body.scrollLeft;
s += ” 网页正文部分上：”+ window.screenTop;
s += ” 网页正文部分左：”+ window.screenLeft;
s += ” 屏幕分辨率的高：”+ window.screen.height;
s += ” 屏幕分辨率的宽：”+ window.screen.width;
s += ” 屏幕可用工作区高度：”+ window.screen.availHeight;
s += ” 屏幕可用工作区宽度：”+ window.screen.availWidth;
s += ” 你的屏幕设置是 “+ window.screen.colorDepth +” 位彩色”;
s += ” 你的屏幕设置 “+ window.screen.deviceXDPI +” 像素/英寸”;
}
getInfo();
</script>
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
如果在页面中添加这行标记的话
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
?
在Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
而如果没有定义W3C的标准，则
IE为：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
Opera为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
document.documentElement.clientHeight + document.documentElement.scrollTop
等于 document.documentElement.scrollHeight
分享到：
相关推荐
### JavaScript 获取浏览器的显示区域大小信息 在网页开发过程中，获取浏览器显示区域的大小是非常重要的一个环节，这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取浏览器...
在前端开发中，经常需要获取浏览器窗口的大小，以便于根据不同的屏幕尺寸调整页面布局或实现响应式设计。本文将详细介绍如何使用JavaScript来获取浏览器窗口的宽度、高度以及相关的属性。 #### 一、基本概念 在...
首先，我们需要了解浏览器窗口的宽高是可以通过JavaScript对象属性获取的。在脚本中，我们通常使用document对象的documentElement属性来获取整个HTML文档的根元素，进一步通过offsetWidth属性获取当前浏览器窗口的...
- 使用 `window.innerWidth` 和 `window.innerHeight` 来获取浏览器窗口的可视区域尺寸，这两个属性在现代浏览器中都得到了很好的支持。 - 在处理旧版浏览器或兼容性问题时，可以使用 `document.documentElement....
在JavaScript中，监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一：适用于IE浏览器，仅在关闭时提示 ```javascript window....
### Python获取浏览器窗口句柄过程解析 在自动化测试与网页抓取领域，使用Python结合Selenium库来控制浏览器成为了一种常见的技术手段。其中，获取浏览器窗口句柄并进行窗口切换是实现多窗口操作的关键步骤之一。...
在IT行业中，获取浏览器地址栏URL是一项常见的任务，特别是在开发浏览器扩展、自动化测试或数据分析等场景下。本文将深入探讨如何通过枚举和COM组件来实现这一目标，并介绍如何向浏览器添加插件来获取地址栏的URL。 ...
其中一项常见需求是获取浏览器窗口的各种属性值，比如宽度、高度等，这对于响应式设计或某些特定功能（如弹窗位置计算）非常有用。 #### 一、主要窗口属性 在提供的代码示例中，通过`getInfo`函数展示了如何获取一...
### 浏览器窗口属性大全：深入理解与应用 #### 引言 在Web开发领域，`window`对象是核心且不可或缺的一部分，它不仅代表了浏览器窗口本身，还提供了丰富的属性和方法，允许开发者对浏览器窗口进行精细控制，实现...
在web开发中，调整浏览器窗口大小是常见的用户操作之一，JavaScript提供了一种机制，允许我们在窗口大小变化时执行特定的代码。这篇文章的重点是介绍如何使用JavaScript中的window对象的onresize事件来实现当浏览器...
在JavaScript中，获取浏览器窗口、屏幕以及网页的高度和宽度是常见的需求，这在网页布局、动态调整元素尺寸、响应式设计等方面非常有用。以下是一些关键的JavaScript属性和方法，用于获取这些信息： 1. **网页可见...
这个函数会返回当前浏览器窗口的可视高度和宽度，即使在不同浏览器和标准模式下也能得到一致的结果。`window.innerHeight` 和 `window.innerWidth` 是针对现代浏览器的解决方案，当其他方法失效时，它们通常能提供...
- **window.status**: 设置或获取浏览器窗口状态栏中的文本。 #### 14.7 处理未捕获的JavaScript错误 - **window.onerror**: 一个事件处理器，当窗口中的JavaScript发生错误时被调用。 - **语法**: `window.on...
在HTML和JavaScript中，有三个关键的事件可以用来监听浏览器窗口的状态变化：`onload`、`onunload`、以及`onbeforeunload`。其中： 1. `onload`事件发生在页面加载完成后。 2. `onunload`事件发生在浏览器窗口即将...
在JavaScript中，动态获取浏览器页面放大缩小的比例是一个常见的需求，特别是在进行响应式设计或精确的图形渲染时。这个过程涉及到浏览器窗口的尺寸变化监听、设备像素比（devicePixelRatio）的检测以及对不同浏览器...
总之，JavaScript中的BOM提供了对浏览器窗口的访问和操作能力，但要注意不同浏览器之间存在的兼容性问题。在实际开发中，为了确保代码能在各种浏览器环境下正常工作，通常需要进行兼容性检查和适当的处理。
获取浏览器窗口的完整宽度和高度可以使用`window.outerWidth`和`window.outerHeight`。这两个属性包含了整个浏览器窗口的像素尺寸，包括菜单、工具栏等。 3. **动态监听窗口尺寸变化**： 有时候我们可能需要在窗口...
在实际操作中，我们可能会遇到浏览器窗口大小不符合预期的情况，这时需要手动将其最大化以确保测试覆盖到全屏场景。针对这个问题，我们可以编写特定的函数来实现窗口的最大化。 上述代码提供了一个使用 Selenium ...