When my browser window is in full screen mode, the inner width of the window still seems to be smaller than my screen width. I am confused because (based on this thread) I thought that, if my inner window took up my entire screen, then it would have the same dimensions as my screen.
Instead, I receive the following values when I run window.innerWidth and screen.width in full screen mode:
Screen width: 1280 px
Inner window width: 625 px
My browser is zoomed to 100%.
Why doesn’t the inner window width match the screen width when I put my browser in full screen mode?
Advertisement
Answer
As window.innerWidth and window.innerHeight return the dimensions of the viewport window instead of the display monitor, zooming into a webpage will decrease the values of both window.innerWidth and window.innerHeight.
Zooming in can happen both in the operating system and in the browser. If the viewport window covers the entire screen and window.innerWidth and screen.width do not match, it’s most likely the OS that is zoomed in.
To fix this, just set the OS’s zoom to 100%. This can be done in Windows by going to display settings and setting scale to 100%.