window.clientWidth在IE中始终为0
提问于 2012-10-01 19:04:08
我需要在IE文件的包含窗口的实际像素clientWidth，以计算一个适当的缩放值，但发现窗口总是返回一个值0。有办法从任何DOM对象中获取这个值吗？我是一个JS新手，我发现只要变焦是100 %，document.body.clientWidth就能做到这一点，但否则会返回放大的像素值。帮助?
回答 1
Stack Overflow用户
发布于 2012-10-01 19:20:20
在早期版本8的Internet中，它以物理像素大小检索宽度，而从版本8中，它以逻辑像素大小返回宽度。
什么意思？
如果浏览器没有处于正常的缩放级别(用户能够放大或缩小网页: CTRL和+、CTRL和-)，则clientWidth属性的工作方式不同于早期版本的版本8。
- 即使文档中的当前像素大小不同，在版本8之前的Internet中，宽度也是在默认像素大小中计算的。
- 在Internet 8和Firefox、Opera、Google和Safari中，宽度是以当前像素大小计算的。
例如，如果缩放级别为200%，则对于相同的客户端窗口大小，clientWidth属性在版本8之前检索的值比从版本8检索的值大两倍。
对于跨浏览器解决方案获取浏览器窗口的大小：
<head>
<script type="text/javascript">
// always return 1, except at non-default zoom levels in IE before version 8
function GetZoomFactor() {
var factor = 1;
if (document.body.getBoundingClientRect) {
// rect is only in physical pixel size in IE before version 8
var rect = document.body.getBoundingClientRect();
var physicalW = rect.right - rect.left;
var logicalW = document.body.offsetWidth;
// the zoom level is always an integer percent value
factor = Math.round((physicalW / logicalW) * 100) / 100;
}
return factor;
}
function GetWindowSize() {
var zoomFactor = GetZoomFactor();
var w = Math.round(document.documentElement.clientWidth / zoomFactor);
var h = Math.round(document.documentElement.clientHeight / zoomFactor);
var info = document.getElementById("info");
info.innerHTML = w + "px * " + h + "px";
}
</script>
</head>
<body onload="GetWindowSize ()">Size of the browser's client area:
<span id="info" style="margin-left:20px;"></span>
<div
style="width:500px; height:1000px; background-color:#e0a0a0;">Size of this element: 500px * 1000px</div>
</body>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12684007
复制相关文章
腾讯云开发者
