Chrome developer tools window dimensions are inconsistent

Question

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?

Answer 1

That's including the vertical scroll bar's width. Try removing the scroll bar and then check. It will match exactly.

Answer 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.