Best Media Query excluding scroll solution

[MattDiMu]

Media Queries include the scrollbar, so if you use something like this:

@media (max-width: 768px) {
background-color: green;
}

… it will actually fire(depending on the scrollbar width of the browser) at about 750px. IMO this sucks and I’m currently unsure, how to solve this problem.

Solution #1

html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow-y: scroll;
    position: relative;
}

Seems to work, but looks hacky to me

Solution #2
use a JavaScript solution like https://github.com/stowball/mqGenie
Problem: I fear this hurts the performance

Solution #3
Do nothing. Big Frameworks like Foundation or Bootstrap seem to do this (nothing) and I wonder why.

What’s your opinion? How do you face this problem?

Regards
MattDiMu

[Shikkediel]

Viewport units and media queries are a bit flawed for practical use (with pixel accuracy). Since I’m using jQuery often, $(window).width() is a very reliable tool for this. A possible performance issue (I doubt there is though) can be limited by not changing the CSS with JavaScript but adding and removing predefined classes.

[Author]

Posts