问题
When you have the Chrome developer tools open, and you resize the window, a small white box appears in the top right corner telling you the dimensions of the window as you resize it. I've marked it with a big green arrow in the screenshot below.
This is a very useful tool, but I've noticed that frequently the values are unexpected and inconsistent with the widths of other elements. For example, when I took the screenshot below, Chrome says the window width is 419px. But if I click the html elements, whose width should be 100%, Chrome tells me its width is 404px. This is confusing to me. Why are they different? Is this a bug in Chrome?
回答1:
That's including the vertical scroll bar's width. Try removing the scroll bar and then check. It will match exactly.
回答2:
FYI those dimension numbers are document.documentElement.clientWidth and document.documentElement.clientHeight.
Robert is correct. Make sure the zoom ratio is 100% to get the correct dimensions.
来源：https://stackoverflow.com/questions/22204528/chrome-developer-tools-window-dimensions-are-inconsistent