Geek Answers Handbook

Chrome developer window sizes are not compatible

When you have the Chrome Developer Tools open and you resize the window, a small white window will appear in the upper right corner in which you will resize the window when you resize it. I marked it with a big green arrow in the screenshot below.

This is a very useful tool, but I noticed that often the values ​​are unexpected and do not match the width of the other elements. For example, when I took a screenshot below, Chrome says the window is 419 pixels wide. But if I click on the html elements whose width should be 100%, Chrome will tell me that its width is 404px. It bothers me. Why are they different? Is this a bug in Chrome?

Chrome developer tools window size indicator

+6
source share
2 answers

Including the width of the vertical scrollbar. Try removing the scroll bar and then checking. It will match exactly.

+9
source

FYI these dimensional numbers are document.documentElement.clientWidth and document.documentElement.clientHeight .

Robert is right. Make sure the scaling factor is 100% to get the right sizes.

+1
source

More articles:


All Articles