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

If we take the MDN definition of window.outerWidth:

Window.outerWidth read-only property returns the width of the outside of the browser window. It represents the width of the whole browser window including sidebar (if expanded), window chrome and window resizing borders/handles.

And for window.innerWidth:

The read-only Window property innerWidth returns the interior width of the window in pixels. This includes the width of the vertical scroll bar if one is present.

Concluding:

1. The outerHeight and outerWidth take into account the browser window size and not the html visible size. Because of that, the values can change from browser to browser and device to device. Moreover, the values can be larger than the device screen itself.
2. The innerWidth value includes the scroll if present. This means the width value will not be only referring to the visible part but also the amount of scroll left which could be greater than window.outerWidth.