Capture document width with scroll bar

Question

Good afternoon,

I’m making a responsive site where I use CSS with media="screen" and jQuery.

Problem:
However Javascript and CSS do not recognize the same document width value when the page has some scrollbar (when testing in Chrome using Adaptive Design Mode - Ctrl+Shift+M - works normally) that is, works perfectly on mobile devices and other devices not, because they have the scrollbar.

Example:
If you run a alert ($(window).width()); to display the width of a document with scroll bar on a desktop with 1920/1080 resolution, will bring the following response 1903 instead of 1920

Doubt:
Is there any way to take the width of a website window with scroll or make both Javascript and CSS recognize the width of the document as being the same on the desktop?

Answer 1

You can solve your problem like this:

        $(function(){
            var hasScroll= document.body.scrollHeight > document.body.clientHeight;
            if (hasScroll) {
                // Aqui são suas definições/regras se existe a barra de rolagem
                var widthPage = ($(window).width() + 17);
                console.log(widthPage);
            }else{
                // Aqui são suas definições/regras se NÃO existe a barra de rolagem
                var widthPage = ($(window).width());
                console.log(widthPage);
            }
        });

With this you take the width of the page + the width of the scroll bar.
With this solution you also check whether or not the scroll bar exists.
I hope I’ve helped.