window.innerWidth vs document.documentElement.clientWidth [英] window.innerWidth vs document.documentElement.clientWidth

问题描述

关于 window.innerWidth 和 document.documentElement.clientWidth ，

$ ol

Webkit（Chrome / Safari）声明 innerWidth 小于 clientWidth 。

Trident和Presto声明 innerWidth 大于 clientWidth 。

Gecko声明 innerWidth 的大小与 clientWidth 。

strong> W3C（或silimarauthority）？

测试脚本（在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_w + - + client_h; document.getElementById d）。innerHTML = deb ug_msg; document.title = debug_msg; document.body.style.background =（client_w === inner_w&& client_h === inner_h？green：red）;}，60）;  

 < div id =d>< / div>  pre> 

（以全页模式运行代码段， 窗口，观察 debug_msg ，同时拖动窗口边缘以调整其大小。）

解决方案

根据W3C 规范（2016年3月17日）：

>

...

clientWidth 属性必须运行以下步骤：

1. 如果元素没有关联的CSS布局框，或者CSS布局框是内联的，则返回零。


2. 如果元素是根元素，元素的文档不在怪异模式，或者如果元素是HTML body元素，元素的文档处于quirks模式，则返回视口宽度，不包括渲染滚动条的大小（如果有）。


3. 返回填充边缘的宽度不包括填充边缘和边框边缘之间任何呈现的滚动条的宽度，忽略适用于元素及其祖先的任何转换。

Regarding window.innerWidth and document.documentElement.clientWidth,

1. Webkit (Chrome / Safari) claims innerWidth is smaller than clientWidth.

2. Trident and Presto claim innerWidth is bigger than clientWidth.

3. Gecko claims innerWidth is the same size as clientWidth.

What is the correct behavior stated by W3C (or silimar "authority")?

Test Script (on JSFiddle) (on 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>

(Run the snippet in full page mode and un-maximize or "restore" the window. Observe debug_msg while dragging the edge of the window to resize it.)

解决方案

According to the W3C specification (17 March 2016):

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:

1. If the element has no associated CSS layout box or if the CSS layout box is inline, return zero.
2. 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).
3. 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.

这篇关于window.innerWidth vs document.documentElement.clientWidth的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！