Cannot get width of screen without scrollbar using cross-browser expression

Question

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);

I used Math.min rather than Math.max, so that whichever width was less was taken for width
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.

window.innerWidth should be cross browser (developer.mozilla.org/en-US/docs/Web/API/Window.innerWidth)? That will give you the same width with or without the scrollbar. — putvande
– putvande, Commented Dec 6, 2014 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
– Sunil, Commented Dec 6, 2014 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
– Sunil, Commented Dec 6, 2014 at 20:32
Testing in Chrome, document.documentElement.clientWidth gives the width of the viewport without scrollbar. — Fabrício Matté
– Fabrício Matté, Commented Dec 6, 2014 at 22:10

Rodrigo5244 · Accepted Answer · 2015-09-19 20:33:33Z

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.

answered Sep 19, 2015 at 20:33

Rodrigo5244

5,5852 gold badges29 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot get width of screen without scrollbar using cross-browser expression

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related