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）？

测试脚本（）（在）：

  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日）：

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):

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