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 :
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 :
779/679/579px
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With