Deep Dive about viewport sizes
Halp! XD
I decided to tinker around trying to get a better understanding of the viewport's size. Just for better understanding.
I thought it would be simple. But it seems i was a tid bit wrong.
I have two ways from the js window object ill refer to as
inner and outer.
From what i understand, inner is more or less the viewport itself. And outer is the whole application browser(viewport + chrome(the tab and search bar. Very weird name choices here.))
inner width,height seem to work well!
I tested by making a new window via window.open:
The goal, a 500x500 window for example sake.
It makes a window with this as result:
It appears 8 was added to the width, and 18 added to the height.
And how i measured this was making a div in another window that same size.
And as you can see, they match up pretty well. Not sure why it added 8 and 18 however.
15 Replies
But what makes it weirder? See the outer size? 522 x 590?
First off it changes by 1 if you move the window. 522 x 590 over here moves it 523 x 591 over there, i assume this is viewport pixel rounding error stuff.
Anyways. The numbers are wrong.
The next div is 520 x 590 as well, but as you can see, its not the same size of the browser at all.
I assumed "hey maybe its invisible scrollbars" but that doesnt explain the sliver at the bottom
So the main points of confusion is why width and height adds 8 and 18 for inner.
And why it adds 22 and 90 for outer(Which is specially odd considering the width of window actually shouldnt be that different)
borders
and browser's chrome
(in this context, the "chrome" is the browser ui and not google chrome itself)
also, if i had to bet, there is some weirdness with sub-pixel rendering too
this bit right?
and the border around the window
it is 1 or 2 pixels
but that doesnt account for the 508 -> 522 right?
for the width or height?
the width
yes, it does: the scrollbar is 17 pixels
or something like that
🤔 actually, let me check
outer - inner gives 15
which maybe 16 or 14 from the rendering thing
i just checked and the sidebar is indeed 15px on windows 11
it may also be a bug
wait so inner only accounts for scrollbar if rendered correct? Thats what i been seeing said around, and if the window goes from 500x500 initally to be instead to 508 x 518, where does this 8 and 18 come from? I get if its borders and scrollbars but is the bottom scroll bar different or something? The additional size is over double
Ok so now im thinking thats possibly a weird size restrant on the window.open function.
Idk why...but if its too small it will add 8 and 18.
But if its say
The result is surprisingly:
didnt add 22px to the outer width this time
Perhaps outer width...doesnt include scrollbar?
700px div doesnt match the 700px outer claims to be
https://developer.mozilla.org/en-US/docs/Web/API/Window/outerWidth <-- it includes everything
instead of 700x700, try 700x720