Adjusts CSS media queries in browsers that include the scrollbar 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
DOMContentLoaded), mqGenie forces a vertical scrollbar on the <html> element.window.innerWidth to document.documentElement.clientWidth. If they're different, this value equals the width of the browser's scrollbar.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.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/)
FAQs
Adjusts CSS media queries in browsers that include the scrollbar width in the viewport width so they fire at the intended size
We found that mq-genie demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.