UNPKG

browsernizr

Version:

Modernizr wrapper for use with browserify

74 lines (67 loc) 2.04 kB
var ModernizrProto = require('./ModernizrProto.js'); var injectElementWithStyles = require('./injectElementWithStyles.js'); /** * Modernizr.mq tests a given media query, live against the current state of the window * adapted from matchMedia polyfill by Scott Jehl and Paul Irish * gist.github.com/786768 * * @memberOf Modernizr * @name Modernizr.mq * @optionName Modernizr.mq() * @optionProp mq * @access public * @function mq * @param {string} mq - String of the media query we want to test * @returns {boolean} * @example * Modernizr.mq allows for you to programmatically check if the current browser * window state matches a media query. * * ```js * var query = Modernizr.mq('(min-width: 900px)'); * * if (query) { * // the browser window is larger than 900px * } * ``` * * Only valid media queries are supported, therefore you must always include values * with your media query * * ```js * // good * Modernizr.mq('(min-width: 900px)'); * * // bad * Modernizr.mq('min-width'); * ``` * * If you would just like to test that media queries are supported in general, use * * ```js * Modernizr.mq('only all'); // true if MQ are supported, false if not * ``` * * Note that if the browser does not support media queries (e.g. old IE) mq will * always return false. */ var mq = (function() { var matchMedia = window.matchMedia || window.msMatchMedia; if (matchMedia) { return function(mq) { var mql = matchMedia(mq); return mql && mql.matches || false; }; } return function(mq) { var bool = false; injectElementWithStyles('@media ' + mq + ' { #modernizr { position: absolute; } }', function(node) { bool = (window.getComputedStyle ? window.getComputedStyle(node, null) : node.currentStyle).position === 'absolute'; }); return bool; }; })(); ModernizrProto.mq = mq; module.exports = mq;