关于window.innerWidth
和document.documentElement.clientWidth
,
Webkit (Chrome/Safari) 声明
innerWidth
小于clientWidth
。Trident 和 Presto 声称
innerWidth
大于clientWidth
。Gecko 声称
innerWidth
与clientWidth
大小相同。
W3C(或类似的“权威”)声明的正确行为是什么?
测试脚本(on JSFiddle)(在 GoogleHost 上):
setInterval(function() {
var inner_w = window.innerWidth;
var inner_h = window.innerHeight;
var client_w = document.documentElement.clientWidth;
var client_h = document.documentElement.clientHeight;
var debug_msg = "inner: " + inner_w + "-" + inner_h + "<br>client: " + client_w + "-" + client_h;
document.getElementById("d").innerHTML = debug_msg;
document.title = debug_msg;
document.body.style.background = (client_w === inner_w && client_h === inner_h ? "green" : "red");
}, 60);
<div id="d"></div>
(以全页模式运行代码段并取消最大化或“恢复”窗口。在拖动窗口边缘以调整其大小的同时观察debug_msg
。)
最佳答案
根据 W3C specification (2016 年 3 月 17 日):
The innerWidth attribute must return the viewport width including the size of a rendered scroll bar (if any), or zero if there is no viewport.
...
The clientWidth attribute must run these steps:
- If the element has no associated CSS layout box or if the CSS layout box is inline, return zero.
- If the element is the root element and the element's document is not in quirks mode, or if the element is the HTML body element and the element's document is in quirks mode, return the viewport width excluding the size of a rendered scroll bar (if any).
- Return the width of the padding edge excluding the width of any rendered scrollbar between the padding edge and the border edge, ignoring any transforms that apply to the element and its ancestors.
关于javascript - window.innerWidth 与 document.documentElement.clientWidth,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6942785/