版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://solecjj.blogbus.com/logs/45973666.html
关于获取各种浏览器可见窗口大小的一点点研究
<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 " 像素/英寸";
//alert (s);
}
getInfo();
</script>
在我本地测试当中：
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得，很简单，很方便。
而在公司项目当中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
<!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.clientWidth和document.documentElement.clientHeight。 此外，在获取文档滚动的距离时，也需要考虑兼容性。在怪异模式下，可以使用document.body.scrollLeft和...
- `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 分别返回可视区域的宽度和高度。 - **Opera**： - `document.body.clientWidth` 和 `document.body.clientHeight` 分别...
clientWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth : document.documentElement.clientWidth; } else { clientWidth = (document.body....
- 但是，`document.documentElement.clientWidth`和`document.documentElement.clientHeight`会考虑`margin`的影响，因此获取的是包含`margin`的文档宽度和高度。 #### 实例代码详解 ```javascript var ...
在 IE 中，`document.documentElement.clientWidth` 可以获取可见区域的宽度，`document.documentElement.clientHeight` 可以获取可见区域的高度。 在 FireFox 中，`document.documentElement.clientWidth` 可以...
- **document.body.clientWidth**: 表示网页可见区域的宽度（不包含滚动条）。 - **document.body.clientHeight**: 表示网页可见区域的高度（不包含滚动条）。 - **document.body.offsetWidth**: 包含边框在内的网页...
document.documentElement.clientWidth, window.innerWidth || 0, document.body.clientWidth ); } ``` 这个函数会返回当前浏览器窗口的可视高度和宽度，即使在不同浏览器和标准模式下也能得到一致的结果。`...
2. 不同的是，`document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 在Firefox中返回的是页面对象的宽度和高度，包括了边距（Margin）。 Opera浏览器的行为与Firefox类似： 1. `...
winW = document.documentElement.clientWidth; winH = document.documentElement.clientHeight; } else if (document.body) { // other winW = document.body.clientWidth; winH = document.body...
小球在桌面上自由移动，要清楚的几个问题 ...宽：document.documentElement.clientWidth || document.body.clientWidth; 高：document.documentElement.clientHeight || document.body.clientHeight;
- `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 包含了Margin，因此它们实际上是整个页面对象的宽度和高度。 为了兼容各种浏览器，可以使用如下代码来获取浏览器的可视区域...
- 在处理旧版浏览器或兼容性问题时，可以使用 `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight`，并在必要时进行条件判断。 - 对于更复杂的情况，如需要兼容多种浏览器的不同...
windowWidth = document.documentElement.clientWidth; } else if (document.body) { windowWidth = document.body.clientWidth; } if(xScroll ){ pageWidth = windowWidth; } else { pageWidth = xScroll; ...
这可以通过`window.innerWidth`和`window.innerHeight`或`document.documentElement.clientWidth`和`document.documentElement.clientHeight`来实现。 ```javascript // 获取浏览器窗口的宽度 var windowWidth = ...
div.style.left = (document.documentElement.scrollLeft + (document.documentElement.clientWidth - div.offsetWidth) / 2) + "px"; } // 添加事件监听器 window.addEventListener('scroll', sc1); sc1(); // ...
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { winHeight = document.documentElement.clientHeight; winWidth = document....
console.log(document.documentElement.clientWidth); console.log(document.documentElement.clientHeight); ``` 但这种方式仅适用于IE9及以上版本的浏览器。在更早的IE版本或者其他浏览器中，可能需要使用不同的...
- `document.documentElement.clientHeight` 和 `document.documentElement.clientWidth`：IE6 Strict模式下使用。 - `document.body.clientHeight` 和 `document.body.clientWidth`：其他IE版本和其他浏览器使用。 ...
document.getElementById("Javascript.Div1").style.left = (document.documentElement.scrollLeft + (document.documentElement.clientWidth - document.getElementById("Javascript.Div1").offsetWidth) / 2) + ...
var cWidth = document.documentElement.clientWidth; var cHeight = document.documentElement.clientHeight; var sWidth = document.documentElement.scrollWidth; var sHeight = document.documentElement....