Search code examples
javascriptjqueryhtmlcssresponsiveness

Difference of $(window).width() on normal state and responsive state on inspect element

I'm wondering why there is a difference when using $(window).width() in the browser standard and device emulation mode.

When I used $(window).width() on the browser with the width of 1024px i got the value of 1007 in standard mode, but when used it on device emulation mode i got the exact 1024.

So whats the difference between the two and is there anyway to check the specific width that is exact on the normal window mode and device emulation mode?

What i'm using now is $(window).width() for the checking of the window size so is there anyway to check the actual size beside this one?

Solution

  • the difference is in the scrollbar of your browser. In latest version of all browsers (http://www.textfixer.com/tutorials/browser-scrollbar-width.php) the scrollbar width is 17px and if you add it to 1007 you get exactly 1024px.

    The measure is correct as it refers to the area of the browser that is "available" for rendering content - returning the browser full width would be incorrect.