innerWidth and outerWidth oddness on desktop

Question

Open the console in chrome (whilst on SO) and copy in innerWidth + \"|\"+outerWidth + \"|\" + screen.width, for me this will return 2133|1920|1920,

Answer 1

There is a difference between getting of innerWidth and outerWidth. Look at official definitions:

Window.innerWidth: is Width (in pixels) of the browser window viewport including, if rendered, the vertical scrollbar.

Window.outerWidth: The outerWidth attribute must return the width of the client window.

As you can see innerWidth has bound to viewport width, while outerWidth has bound to browser window width.

Therefore outerWidth can be less than innerWidth when your page is just zoomed in, or page view is scaled up. I think you need to state folloving tag in your page:

It will make you page to behave as expected (fit to width limits of screen) in small viewports.

And as a possible cause of large innerWidth is the scripts or styles that can change window dimensions.