Apparently Chrome does not include the scrollbar width (~17px) when evaluating media queries.
IE, Firefox and Opera do count the scrollbar width as part of the viewport.
For example, assume a viewport width of 500px and a scrollbar of 17px.
The below code:
@media (min-width: 500) {
//code
}
will execute in Chrome at a viewport width of greater than or equal to 500px.
However, IE9, Firefox & Opera will execute that code at a viewport width of greather than or equal to 483px.
My Question: Is there a way to force all browsers to either include or exclude the scrollbar width to/from the viewport width when executing media queries?
IE, Firefox and Opera follow the W3C spec of including the scrollbar width in the media query, where Webkit browsers do not.
You can't force the browsers to treat it the same at the moment, so the best option is to modify your layout so that it is not so tightly tied to the widths in your media queries (add extra margin). With such a layout, when it triggers a few pixels early or late, it won't make as much of a difference.