JQuery window width is not equal to CSS window width

Question

I use the following two snippets of CSS and JS code:

@media (max-width: 720px) { // a code to make arrows in a carousel disappear } if(jQuery(window).width() <= 720){ // a code to make arrows in the carousel stop working } 

The problem with them is that the latter runs on an even width = 738px, not 720px. I suspect this is because of the vertical scroll bar of the browser, which is 18px wide in Chrome.

Is there a way to unify this? I would like these steps to be performed at the same time in all browsers, regardless of the width of the scroll bar.

Tests (when the browser is @ 720px and CSS is already executed):

 jQuery(document).innerWidth() = 703 jQuery(window).innerWidth() = 703 jQuery(document).width() = 703 jQuery(window).width() = 703 jQuery('body').width() = 703 jQuery('html').width() = 703 

Answer 1

I had to solve the same problem a while ago, and so far the most correct solution I have found is to use media queries to transfer the actual size of the window to Javascript. You must follow these steps:

• Add a hidden element to your page,
• Use media queries to change the max-width property of this element,
• Read the max-width property of this element through Javascript.

For example, add the following element to the page:

 <div id="currentMedia"></div> 

Then write the following CSS rules:

 #currentMedia { display: none; } @media (max-width: 720px) { /* Make arrows in the carousel disappear... */ #currentMedia { max-width: 720px; } } 

Then from the Javascript side you can write:

 if (parseInt(jQuery("#currentMedia").css("max-width"), 10) <= 720) { // Make arrows in the carousel stop working... } 

And that will be accurate, regardless of the size of the scrollbar, since the value comes from the same media query that causes the carousel to disappear.

I tested this solution in all major recent browsers and gave the correct results.

Answer 2

You will find a great summary of what features are supported in browsers on this page at quirksmode.org .

It’s best to grab an element on the page (using document.body where supported, or document.getElementById or something else), go through the offsetParent chain to find the topmost element, then check this element for clientWidth and clientHeight.

innerWidth documentation

innerWidth() says this method is not applicable to window and document objects; use .width () for them

to try

How can I get browser scroll sizes?

From Alexandre Gomes Blog

 function getScrollBarWidth () { var inner = document.createElement('p'); inner.style.width = "100%"; inner.style.height = "200px"; var outer = document.createElement('div'); outer.style.position = "absolute"; outer.style.top = "0px"; outer.style.left = "0px"; outer.style.visibility = "hidden"; outer.style.width = "200px"; outer.style.height = "150px"; outer.style.overflow = "hidden"; outer.appendChild (inner); document.body.appendChild (outer); var w1 = inner.offsetWidth; outer.style.overflow = 'scroll'; var w2 = inner.offsetWidth; if (w1 == w2) w2 = outer.clientWidth; document.body.removeChild (outer); return (w1 - w2); }; 

in your code

 if(jQuery(window).width()-getScrollBarWidth(); <= 720){ // a code to make arrows in the carousel stop working } 

Answer 3

If you use Bootstrap> 3, I suggest you something.

Bootstrap is dispatched with the .container class to its Css and is predefined. And changing it with @media queries. So, an example of my working code is below.

 function detectWidth(){ var width = $('.container').eq(0).outerWidth() ; console.log(width); if(width<750){ // do something for XS element }else if(width>=750 && width<970){ // do something for SM element }else if(width>=970 && width<1170){ // do something for MD element }else{ // do something for LG element } 

}

Answer 4

I understand this is an old thread, but I think that it can still benefit from this answer.

 var width = window.outerWidth; 

This will give you the width of the window, including the scrollbars, which I think use media queries.

Answer 5

A bit outdated thread, but I found this solution

 function getWidth(){ return ((window.innerWidth > 0) ? window.innerWidth : screen.width); }