4

I am using the following expression in JavaScript to get the width of screen, which seems to work fine except that it includes the width of vertical scroll-bar when scrolling is there.

var wMax = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)

Question: How can the above cross-browser expression be modified so it gives the width of screen excluding the vertical scrollbar? I need to use JavaScript for this and not jQuery.

UPDATE 1:

I found the following cross-browser expression to give the width excluding the vertical scroll-bar.

var wMax = Math.min(document.documentElement.clientWidth, window.innerWidth 
                      || screen.width);
  1. I used Math.min rather than Math.max, so that whichever width was less was taken for width
  2. and also used screen.width instead of 0 in the original expression since screen.width would always be maximum of all widths in this case for all browsers as it will always include scroll-bars.
Sunil
  • 20,653
  • 28
  • 112
  • 197
  • `window.innerWidth` should be cross browser (https://developer.mozilla.org/en-US/docs/Web/API/Window.innerWidth)? That will give you the same width with or without the scrollbar. – putvande Dec 06 '14 at 20:25
  • Like I said the above expression is cross-browser, but it is giving the width with scrollbar. Will window.innerWidth work for IE, Chrome, FireFox, Opera? You are suggesting to just use : var wMax = window.innerWidth? – Sunil Dec 06 '14 at 20:28
  • @putvande, Actually I got the cross-browser expression from another post on StackOverflow and the answer did not mention to use only window.innerWidth as a cross-browser solution to getting screen viewport width. – Sunil Dec 06 '14 at 20:32
  • The website I linked to says most browsers are supported. – putvande Dec 06 '14 at 20:53
  • @putvande, I used the expression under UPDATE 1 which always gives the width without scroll-bar. I tested it and it works perfectly. – Sunil Dec 06 '14 at 21:08
  • @putvande, I think window.innerWidth will not work in IE8 and below, but the expressions mentioned in this post will work in IE8 and below. – Sunil Dec 06 '14 at 21:10
  • You should not be using `screen.width`. The browser window may not be maximized, the user may be using multiple monitors, and `screen.width` is not part of any standard. – Fabrício Matté Dec 06 '14 at 21:26
  • jQuery just uses `document.documentElement.clientWidth` for its `$(window).width()` calculation. – Hart Simha Dec 06 '14 at 21:29
  • @FabrícioMatté, What, in your view, could possibly be used instead of screen.width in the expression under UPDATE 1? I resized my browser window to less than maximum and still the expression under UPDATE 1 worked when using screen width. – Sunil Dec 06 '14 at 22:03
  • I may have misread/misinterpreted your question, reading it again I see that I don't quite understand what is being asked. Your questions reads "width of screen excluding the vertical scrollbar?", does that mean the browser's viewport width? – Fabrício Matté Dec 06 '14 at 22:06
  • @FabrícioMatté, Yes. – Sunil Dec 06 '14 at 22:07
  • 1
    Testing in Chrome, `document.documentElement.clientWidth` gives the width of the viewport without scrollbar. – Fabrício Matté Dec 06 '14 at 22:10
  • See also http://stackoverflow.com/q/8339377/1136253 – Bengi Besçeli Aug 02 '16 at 08:58

1 Answers1

1

screen.width is the width of the display screen, not the window of the browser excluding the scroll bar.

You should use Math.min instead of Math.max since the width without the scroll bar is going to be smaller than the width with scroll bars.

Also if there is a browser that does not work properly, you could try getting the width of the body or html tag without clientWidth like this document.documentElement.scrollWidth.

Rodrigo5244
  • 5,145
  • 2
  • 25
  • 36