Regarding window.innerWidth and document.documentElement.clientWidth,
Webkit (Chrome / Safari) claims
innerWidthis smaller thanclientWidth.Trident and Presto claim
innerWidthis bigger thanclientWidth.Gecko claims
innerWidthis the same size asclientWidth.
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.)