forked from stowball/mqGenie
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Updated README to expand on mqGenie's use. Added LICENSE
- Loading branch information
Showing
2 changed files
with
44 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 `<html>`. 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 `<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) | ||
| * `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 `<head>` 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) | ||
| Copyright (c) 2013 Matt Stow | ||
| Licensed under the MIT license (see LICENSE for details) | ||
| Minified version created with UglifyJS (http://jscompress.com/) |