Why is document.documentElement.clientHeight different from site to site?

Question

I'm trying to figure out what the size of my viewport is in the Chrome browser. So, I go to a specific page, for example stackoverflow.com, and open a console and type:

document.documentElement.clientHeightwhich outputs 597 document.documentElement.clientWidth , which outputs 1229

Then I go to another page, for example google.com. In the same browser (I just open a new tab):

document.documentElement.clientHeightwhich outputs 525 document.documentElement.clientWidth , which outputs 1093

I wonder why this will happen? Shouldn't that give me a viewport? Or, in other words, the size of the page I see (without scrolling)?

I took two screenshots (the same thing happens using Firefox):

http://prntscr.com/20s6k9 http://prntscr.com/20s6vt

Answer 1

Results are in CSS pixels. Judging by the screenshots, you have different zoom settings for the pages, which means that the height and width of the viewport are different numbers of CSS pixels.

Please note that the aspect ratio for both pages is the same 3.16: 1.