0

I am admittedly new to developing responsive websites. I implemented one using media queries based upon some breakpoints. During testing, I found that the whole approach of using media queries for widths is seriously flawed because of inclusion of scrollbar width, unless there is a meaningful way to determine that dynamically. Historically that was not even consistent. See this on stackoverflow posted in 2011, for example.

$(window).width() consistently returns width without scrollbars. Though there was a discussion on the Jquery forum on this issue, no changes were made. So why use media query for width at all, when you can use jquery resize event handler?

I am aware that I need to handle throttling during Jquery's resize event handling but that is easy to do using setTimeout and clearTimeout.

If it is required to find if it is a mobile device, user-agent in the http request and/or screen.width should suffice to get that info.

Community
  • 1
  • 1
Sunny
  • 9,245
  • 10
  • 49
  • 79
  • 1
    I'm not sure what is your question here but using media queries in css is way better than javascript for performance issues. also jquery methods for getting window width and height are not accurate because of the scrollbar width and may give you different results depending on your browser. its better to use native javascript window.innerWidth and window.innerHeight – Hussain Almomen Feb 01 '16 at 09:17
  • 1
    also css media queries are accurate at getting the viewport dimensions – Hussain Almomen Feb 01 '16 at 09:19
  • @HussainAlmomen But how do you handle the scrollbar issue in media queries? All I am concerned is, is getting ACCURATELY the viewport width or innerwidth without the scrollbar. Any reference on the subject would be appreciated. – Sunny Feb 01 '16 at 09:35
  • @HussainAlmomen Is window.innerWidth consistent across browsers in giving width minus scrollbar width? Is there a way to get scrollbar width? – Sunny Feb 01 '16 at 09:39
  • 1
    each browser has different implementation for the scrollbar. from my experience if you want to use something consistent that works for both css and javascript the same way and wont make problems across different browser, use media queries for css and their equivalent value in javascript which is window.innerWidth and window.innerHeight. these values are calculated exactly like media queries max-width and max-height. – Hussain Almomen Feb 01 '16 at 10:40
  • @HussainAlmomen I will try them out. "use media queries for css and their equivalent value in javascript which is window.innerWidth and window.innerHeight..." You mean media query max-width is calculated the same way as window.innerWidth? I though media query calculation includes width of scroll bar and window.innerWidth does not include scroll bar width. If you post this explanation, in more details, as an answer, I will accept it. – Sunny Feb 01 '16 at 10:48

1 Answers1

1

Each browser has different implementation of the scroll bars. so when you get the viewport, the result varies across different browsers.

Chrome and Safari exclude the scrollbar dimensions. Firefox, Opera and IE include the scrollbar dimensions.

and thats the main issue here, if I chose:

@media (min-width: 800px) { ... }

Chrome and Safari will include those styles when the body width is 800px or greater. However, if your OS shows vertical scrollbars with a width of 20px, other browsers would include the styles at 780px.

you can read this article for better explanation.

so each browser will give you different viewport when using media queries. but for each browser if you want to get the viewport exactly as css media queries does, don't use jQuery's width and height because it may not be accurate because of the scrollbars. instead use native javascript variables (window.innerWidth and window.innerHeight) those two variables will give you the viewport same as css media queries.

so if the css media query width was 800 pixels, window.innerWidth value will also be 800. but $(window).width() may be different!

with this you guarantee that values for viewport is the same in css and javascript.

of course, each browser may behave a little differently with your responsive design because of the 20 pixels scrollbar difference and you can't have the same exact result across all browsers. but 20 pixels is not that big deal.

I suggest you read more articles related to responsive design and scrollbar issues.

here is a good one

I hope this qualifies as an answer for your question.

Hussain Almomen
  • 171
  • 5