$(window).width() AND $(window).outerWidth() excluding the scrollbar width > Window and viewport width in CSS and Javascript

It is very unpleasant that $(window).width() or $(window).outerWidth() does not return actual view port width scroll bar width. Especially when trying to match the window width to the CSS media queries.

Currently if you have a media query for responsive design with the CSS like:

@media screen and (max-width: 1600px) { body {background: red;} }

When the background color is actually applied to the document by the browser, jQuery tells the window width is less than 1600px (1600 - scrollbar width). But you know its not the expected result.

This is very unpleasant situation cases where there are some mobile-specific stuff that needs to be done in both, CSS and JS. And they would need to be done at the exactly same width of the document/window.

However, plain JavaScript returns 1600 as the window width when asked using below code snippet:

window.innerWidth