Get browser window width including scrollbar

Question

I tried to get browser window width with $(window).width();. On IE 10, it does return the full browser width, include the scroll bar. However, on Firefox and Chrome, both return the value without the scroll bar.

How can I get the browser width include with the scroll bar together? Because I need the detected width to be exactly same as CSS.

Thanks.

`I need the detected width to be exactly same as CSS.` Which CSS property are we talking about? — Adassko, Oct 25 '13 at 07:14
I don't know what CSS property. But it's Bootstrap responsive CSS. — user1995781, Oct 26 '13 at 02:04

score 78 · Answer 1 · answered Sep 30 '14 at 14:31

78

The first answer was close, but upon further inspection it is a bit more complicated. The body.clientWidth is the width excluding the scrollbars. The window.outerWidth is the width including the scrollbars and other window elements like the window border. The window.innerWidth is the actual width of the window, including scrollbars, but not including the window border.

enter image description here

answered Sep 30 '14 at 14:31

Jamie Thomas

1,513
1
10
16

9

This should be the correct marked answer, even three years later. – runfaj Dec 08 '17 at 05:15

score 29 · Accepted Answer · edited Oct 02 '18 at 13:59

29

This will get the full Window's width:

 window.outerWidth

NOTE: jQuery's outerWidth() doesn’t work on $(window)

edited Oct 02 '18 at 13:59

Mosh Feu

28,354
16
88
135

answered Oct 25 '13 at 06:50

infidel

452
5
5

Thanks. But it is still the same. How to detect scrollbar width? – user1995781 Oct 25 '13 at 06:54
It is same value as before. – user1995781 Oct 25 '13 at 07:04
how about a browser workaround? something like an IE hack for the css. https://gist.github.com/hatefulcrawdad/5068210 <- something like this – infidel Oct 25 '13 at 07:05
7

if you have the javascript inspector window to the right of the webpage then `outerWidth` will include the width of the inspector - and as you resize the page itself `outerWidth` won't even change. I think the only purpose of `outerWidth` should be for google analytics type logging of browser window size. It's useless for layout purposes whether you have the inspector window open or not. You probably want `innerWidth` which equates to 'viewport width' for responsive design – Simon_Weaver Apr 11 '15 at 18:15
It returns `1920` even though I set the width to 768 on chrome developer tools responsive tool – Black Feb 12 '20 at 10:04
this is not good, it includes the whole window, including hte developer toolbar or plugins – user151496 Oct 29 '21 at 08:50

score 24 · Answer 3 · answered Jan 04 '17 at 10:29

24

window.innerWidth seems to be the correct answer when needed for responsive design

answered Jan 04 '17 at 10:29

minlare

2,454
25
46

exactly what I need. As per OP's comment in the question, this should have been the accepted answer. – Gogol Oct 02 '17 at 13:45
This is the answer! – JCraine Jul 20 '18 at 03:31
this is the only correct answer – user151496 Oct 29 '21 at 08:51

score 7 · Answer 4 · answered May 23 '19 at 20:45

window.innerWidth will give the width of the HTML and the scrollbar. This value is the value used for device width breakpoints when using media queries in CSS. Essentially, window.innerWidth is equal to the calculated CSS unit 100vw. However, window.outerWidth will give you the width of the entire window.

For example, if you had Chrome's Dev Tools open inside of the browser, window.outerWidth would be the width of the webpage + scroll bar + Chrome's Dev Tools inspector. While window.innerWidth would return the width of just the webpage + scroll bar.

Get browser window width including scrollbar

4 Answers4

Linked