From 01c1b715a60e5d667cccf19bb279fc5dfdbafba6 Mon Sep 17 00:00:00 2001 From: Matt Stow Date: Mon, 2 Sep 2013 16:52:31 +1000 Subject: [PATCH] Updated README to expand on mqGenie's use. Added LICENSE --- LICENSE | 20 ++++++++++++++++++++ README.md | 34 ++++++++++++++++++++++++---------- 2 files changed, 44 insertions(+), 10 deletions(-) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..ea6cf8b --- /dev/null +++ b/LICENSE @@ -0,0 +1,20 @@ +The MIT License (MIT) + +Copyright (c) 2013 Matt Stow + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER +IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/README.md b/README.md index 214e8d8..ecdb44a 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,44 @@ mqGenie ======= -### Adjusts CSS media queries in browsers that include the scrollbar's width in the viewport width so they fire at the intended size +## Your media queries are wrong! -WebKit browsers 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 as mobile devices don't have scrollbars. +### mqGenie adjusts CSS media queries in browsers that include the scrollbar's width in the viewport width so they fire at the intended size -If not already applied with CSS, mqGenie forces a vertical scrollbar on ``. If the browser is not WebKit based, mqGenie increases all of the media queries by the width of the scrollbar so that they fire at the correct size - including em based ones. +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 as mobile devices don't have scrollbars. + +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](http://stowball.github.io/mqGenie/)** + +#### 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 `` 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) -* `fontSize` (computed HTML font-size) -* `width` (scrollbar width) +* `adjusted` (boolean - whether your media queries were adusted) +* `fontSize` (the computed HTML font-size) +* `width` (the width adjusted by) A second function, `mqAdjust` is made available, which allows you to re-calculate media queries that are written in JavaScript. Simply pass `mqAdjust` the media query string and it will return one that's adjusted appropriately. --- -***Usage:*** +**Usage:** 1. Include mq.genie.min.js in the `` of your document -2. If you develop in Chrome or Safari, write your media queries as you always have. If you use another browser, subtract `mqGenie.width` from the browser's reported viewport width. +2. 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. + +3. 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](https://github.com/stowball/Viewport-Genie) to tell you the "actual" viewport size. -3. If you have media queries triggering events in JavaScript, such as with enquire.js, use `mqAdjust(string)` as opposed to `string` +4. If you have media queries triggering events in JavaScript, such as with [enquire.js](http://wicky.nillia.ms/enquire.js/), use `mqAdjust(mq-string)` as opposed to `mq-string` --- -Minified version created with UglifyJS (http://jscompress.com) \ No newline at end of file +Copyright (c) 2013 Matt Stow +Licensed under the MIT license (see LICENSE for details) +Minified version created with UglifyJS (http://jscompress.com/) \ No newline at end of file