Media queries and scrollbar width

Question

I am working on a layout that needs precise media query handling. One of my issues is the crossbrowser scrollbar width as it is different according to browsers and most (all of them?) include it in the window width.

As we can see in these 2 examples, the media queries don't act at the same window size with and without the vertical scrollbar :

1. Test without scrollbar
2. Test with scrollbar

In the first example, you can see the background color change exactly at 800/700/600px window width.
In the second examples with the scrollbar the colors change at :

• Chrome and firefox : 779/679/579px
• IE : 783/783/583px

That makes a difference of up to 21px.

Is there is a work around by ignoring the scrollbar in media queries and focus on the available width itself.
If not how do you handle this issue, do you fix a maximum width for the scollbar and include it in the media queries?

-- UPDATE --

I am searching for best practices/solution with CSS as I would like to avoid JS for this project.

Answer 1

Look this example: http://stowball.github.io/mqGenie/

It is working fine both in Firefox and in Chrome for me (with scrollbars).

You can download and read more about this plugin here: https://github.com/stowball/mqGenie (~2.2 kb)

One of sources: https://stackoverflow.com/a/21414947/2898694

Enjoy.