1

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?

puzzleGuzzle
  • 101
  • 10
  • What browser + OS are you seeing this? Which "fullscreen" mode are you using? The OS one, by either pressing a keyboard shortcut or clicking an icon in the browser's UI, or the one from `Element.requestFullScreen()`? – Kaiido Jul 27 '22 at 02:27
  • @Kaiido I am using Chrome 103 on Windows 10, and getting to full screen mode using element.requestFullScreen() – puzzleGuzzle Jul 27 '22 at 22:54
  • Check display settings. It could be possible that your scale is set to over 100% in Windows opposed to your browser. – Caeden Jul 30 '22 at 02:03
  • @Caeden Thank you, that was the problem! If you post your comment as an answer, I can mark it as the right answer. Otherwise, I will post the answer myself and credit you. – puzzleGuzzle Aug 02 '22 at 02:05
  • Glad to see it was the problem! Thank you for offering to give credit -- typically this doesn't happen. I posted an answer below. – Caeden Aug 02 '22 at 22:16

1 Answers1

1

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

Caeden
  • 376
  • 1
  • 6