stowball / mqgenie Goto Github PK

Adjusts CSS media queries in browsers that include the scrollbar width in the viewport width so they fire at the intended size

Home Page: http://stowball.github.io/mqGenie/

License: MIT License

JavaScript 100.00%

mqgenie's Introduction

mqGenie

Your media queries are wrong!

mqGenie adjusts CSS media queries in browsers that include the scrollbar's width in the viewport width so they fire at the intended size

WebKit browsers (and Chrome/Blink prior to 29.0.1547.57) are the only browsers that don't include the scrollbar in the viewport. While this is technically incorrect (http://www.w3.org/TR/css3-mediaqueries/#width), it makes sense since scrollbar widths vary across platforms and in the case of "mobile" don't exist.

However, it means that the media queries every Windows developer - and Mac developers who enable scrollbars - write actually fire at a different size when viewed on a mobile device or another OS.

View this demo to see mqGenie in action

How does mqGenie work?

If the browser is "modern" and not one of the above WebKit-based ones, on 'domready' (DOMContentLoaded), mqGenie forces a vertical scrollbar on the <html> element.
It then compares window.innerWidth to document.documentElement.clientWidth. If they're different, this value equals the width of the browser's scrollbar.
Then it loops through your stylesheets' media queries and increases all of the min-width and max-width ones by the width of the scrollbar so that they fire at the correct size. It also converts em-based ones, using the HTML's computed font-size.

It returns a JavaScript object called mqGenie, which contains the following properties:

adjusted (boolean - whether your media queries were adusted)
fontSize (the computed HTML font-size)
width (the width adjusted by)
adjustMediaQuery(media-query) (function) allows you to re-calculate media queries that are written in JavaScript. Simply pass adjustMediaQuery the media query string and it will return one that's adjusted appropriately.

Do we need it?

Consider mqGenie as progressive enhancement.

Ideally, your responsive projects will be built in a flexible way, such that a 15-20px difference in media queries shouldn't matter too much.

However, there are definitely times where things can go awry. Fixed-width ads and other modules may rely on more precise measurements, and - while I don't condone targeting device widths specifically - writing a 768px media query and not having it triggered on an a portrait iPad, for example, is a little disconcerting.

Usage:

Include the tiny (~1.1KB minified and gzipped) mq.genie.js in the <head> of your document
If you develop in Safari, Chrome/Blink prior to 29.0.1547.57 or Firefox's scrollbar-less RWD View, write your media queries as you always have. mqGenie will adjust them for every other browser as required.
If you use another browser (or have scrollbars enabled on Mac), subtract mqGenie.width from the browser's reported viewport width. You can use my Viewport Genie bookmarklet to tell you the "actual" viewport size.
If you have media queries triggering events in JavaScript, such as with enquire.js, use adjustMediaQuery(mq-string) as opposed to mq-string

Copyright (c) 2014 Matt Stow
Licensed under the MIT license (see LICENSE for details)
Minified version created with UglifyJS (http://jscompress.com/)

mqgenie's People

Contributors

Stargazers

Watchers

Forkers

enigmadigital nagyist rmcnaughgithub fitchpork thecsea olegcherr carlosferragut mm201 paoesco yosrigh qindroid krimid vladyslavarkavenko jusxon

mqgenie's Issues

Toggling Firefox Responsive Design View doesn't update the media query widths

Responsive Design View is a new Firefox feature that emulates various device viewports and disables the scrollbar width. The thing is, toggling it doesn't refresh the page, so whatever the DOM is doing keeps on happening. mqGenie doesn't realize that scrollbars no longer have width, so it leaves the altered CSS in place, which leads to wrong layouts.

Is there any example usage of adjustMediaQuery?

Hello. I'm trying to use this from within JavaScript, but all I can find about it is a very brief mention of how you can "use adjustMediaQuery". But how? If I try calling adjustMediaQuery(query), I get a reference error - function not defined. If I try grabbing window.mqGenie, that's undefined too. I do have mqGenie running on the page, and it works fine to automatically adjust my CSS rules. But I can't figure out how I'm supposed to use it from within JavaScript.

Webkit no longer excludes scrollbar from width calculation

As of the newest release of Chrome, as far as I can tell, Webkit is no longer excluding the scrollbar from the width calculation, so mqGenie will no longer work properly.

ReferenceError: mqAdjust is not defined

I am using enquire.js and I make this call like so:

$(document).ready(function () {
enquire.register(window.mqAdjust("screen and (max-width:800px)"), function () {
console.log("handler 1 matched");
});
};

Not adjusting all of my CSS files

MQ Genie DOES adjust my main CSS file, but I have an additional one from a 3rd party vendor that is NOT getting adjusted:

<head>
...
<link rel="stylesheet" href="/styles/css/vendor/third_party_stylesheet.css" media="all" />
...
<link rel="stylesheet" href="/styles/css/my_main_stylesheet.css" media="all" />
...

<!-- Modernizr -->
<script src="/js/vendor/modernizr-2.6.2.min.js"></script>

<!-- MQ Genie -->
<script src="/js/vendor/mq.genie.min.js"></script>
...
</head>

<html> overflow-y CSS property is set to 'scroll' but never resetted after loading

Like I said in the description:

The scripts sets the overflow-y CSS property on the html root element to measure the scrollbars. But this property is never resetted to its original value.

Furthermore, it sets the overflow-y property via element.style which means it's hard over overwrite with CSS classes afterwards. You have to use !important which is really ugly.

Solution: It should clean up after itself after finishing his work (means removing the added overflow-y style)

Affectin Bootstrap

Would this affect Bootstrap's media queries? They seem to have it working cross browser, but I'm afraid if it overcorrects Bootstrap's media queries.

If there was a way make the correction selective?

cross domain css

great solution for an annoying problem!

is there a way to make the magic happen when I load CSS from another server or cdn?

thanks :)

@imported styles are not processed

Styles defined using @import are ignored

<style>
@import url("http://example.com/css/main1.css?mlvpfw");
@import url("http://example.com/css/main2.css?mlvpfw");
@import url("http://example.com/css/main3.css?mlvpfw");
@import url("http://example.com/css/main4.css?mlvpfw");
@import url("http://example.com/css/main5.css?mlvpfw");
</style>

The theme I'm using defines stylesheets this way as a workaround for IE's import limitation. When I put the site in production mode, all the style sheets are combined and minified at which the stylesheets are define the "usual" way and mqGenie works fine.

Is it possible to include support for @imported css files?

Thank you for the great plugin!

The library does not process @import url("..") CSS rules

Import the css via @import url("..").
See that media queries are not processed.

mqGenie chokes with single-digit queries

It's not very important since we don't care much about <10px screens 😄 but there is a little bug while using [min|max]-width: N[px|em] in a media query, where N is a single digit. Yes, it's a redundant statement and can be ommited, but I wanted to be thorough, and well, it's a perfectly valid query after all!

The problem lies in the regex used to parse the queries. It's being greedy and parsing the whole line if it can find only a digit. Simple solution, changing the regex from /\d.+?px/gi to /\d.*?px/gi, and /\d.+?em/gi to /\d.*?em/gi.