Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Integrate matchMedia to get support for AddListener and RemoveListener. #109

Closed
wants to merge 2 commits into from

5 participants

@jameswestgate

Take advantage of response.js window.resize loop to add support for a media query list using regex based engine.

Initially wanted to add listener support to Paul's matchMedia.js . Tried a non-timer approach with among other things onpropertychanged / DOMAttrChanged, as well as the css3 transition end approach but realised fully xbrowser was going to need a timer. Didn't want to add another window.resize handler/timer and realised response.js was already:

i) using matchMedia.js
ii) watching window.resize

So I:

i) Moved matchMedia into response.js core, adding the AddListener and RemoveListener methods.
ii) Added the matchMedia media queries to the Rule array so that the listeners were fired instead of the style changes being applied.
iii) Added a feature detect in case there was support for media queries, but not matchMedia (IE9)
iv) Tested in IE6-9, latest Firefox, Safari, Chrome.

jameswestgate added some commits
@jameswestgate jameswestgate Integrate matchMedia to get support for AddListener and RemoveListener.
Take advantage of response.js window.resize loop to add support for a
media query list using regex based engine.
699ab73
@jameswestgate jameswestgate Added test media queries to the standard test page. 40eb0f7
@beebs93

Tested on IE7-9 and so far no problems. Nice update :)

@tauren

+1
any chance this pull request can get added?

@davebeesley

+1
This is a brilliant integration. Not found a bug with it so far, but I am happily using media-queries in my IE JavaScript.

@jefflembeck
Collaborator

Added a build option with the addListener polyfill included.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 18, 2012
  1. @jameswestgate

    Integrate matchMedia to get support for AddListener and RemoveListener.

    jameswestgate authored
    Take advantage of response.js window.resize loop to add support for a
    media query list using regex based engine.
  2. @jameswestgate
This page is out of date. Refresh to see the latest.
Showing with 393 additions and 320 deletions.
  1. +369 −320 respond.src.js
  2. +24 −0 test/test.html
View
689 respond.src.js
@@ -1,324 +1,373 @@
-/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
-/*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */
-window.matchMedia = window.matchMedia || (function(doc, undefined){
-
- var bool,
- docElem = doc.documentElement,
- refNode = docElem.firstElementChild || docElem.firstChild,
- // fakeBody required for <FF4 when executed in <head>
- fakeBody = doc.createElement('body'),
- div = doc.createElement('div');
-
- div.id = 'mq-test-1';
- div.style.cssText = "position:absolute;top:-100em";
- fakeBody.appendChild(div);
-
- return function(q){
-
- div.innerHTML = '&shy;<style media="'+q+'"> #mq-test-1 { width: 42px; }</style>';
-
- docElem.insertBefore(fakeBody, refNode);
- bool = div.offsetWidth == 42;
- docElem.removeChild(fakeBody);
-
- return { matches: bool, media: q };
- };
-
-})(document);
+/*! Respond.js v1.1.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */
+/* mediaQuery support (including listeners) based on https://github.com/paulirish/matchMedia.js James Westgate queryj.com */
+(function( win ){
+ //exposed namespace
+ win.respond = {};
+ //define update even in native-mq-supporting browsers, to avoid errors
+ respond.update = function(){};
+ //expose media query support flag for external use
+ respond.mediaQueriesSupported = win.matchMedia && win.matchMedia( "only all" ).matches;
+ //if media queries are supported, exit here
+ if( respond.mediaQueriesSupported ){ return; }
-/*! Respond.js v1.1.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */
-(function( win ){
- //exposed namespace
- win.respond = {};
-
- //define update even in native-mq-supporting browsers, to avoid errors
- respond.update = function(){};
-
- //expose media query support flag for external use
- respond.mediaQueriesSupported = win.matchMedia && win.matchMedia( "only all" ).matches;
-
- //if media queries are supported, exit here
- if( respond.mediaQueriesSupported ){ return; }
-
- //define vars
- var doc = win.document,
- docElem = doc.documentElement,
- mediastyles = [],
- rules = [],
- appendedEls = [],
- parsedSheets = {},
- resizeThrottle = 30,
- head = doc.getElementsByTagName( "head" )[0] || docElem,
- base = doc.getElementsByTagName( "base" )[0],
- links = head.getElementsByTagName( "link" ),
- requestQueue = [],
-
- //loop stylesheets, send text content to translate
- ripCSS = function(){
- var sheets = links,
- sl = sheets.length,
- i = 0,
- //vars for loop:
- sheet, href, media, isCSS;
-
- for( ; i < sl; i++ ){
- sheet = sheets[ i ],
- href = sheet.href,
- media = sheet.media,
- isCSS = sheet.rel && sheet.rel.toLowerCase() === "stylesheet";
-
- //only links plz and prevent re-parsing
- if( !!href && isCSS && !parsedSheets[ href ] ){
- // selectivizr exposes css through the rawCssText expando
- if (sheet.styleSheet && sheet.styleSheet.rawCssText) {
- translate( sheet.styleSheet.rawCssText, href, media );
- parsedSheets[ href ] = true;
- } else {
- if( (!/^([a-zA-Z:]*\/\/)/.test( href ) && !base)
- || href.replace( RegExp.$1, "" ).split( "/" )[0] === win.location.host ){
- requestQueue.push( {
- href: href,
- media: media
- } );
- }
- }
- }
- }
- makeRequests();
- },
-
- //recurse through request queue, get css text
- makeRequests = function(){
- if( requestQueue.length ){
- var thisRequest = requestQueue.shift();
-
- ajax( thisRequest.href, function( styles ){
- translate( styles, thisRequest.href, thisRequest.media );
- parsedSheets[ thisRequest.href ] = true;
- makeRequests();
- } );
- }
- },
-
- //find media blocks in css text, convert to style blocks
- translate = function( styles, href, media ){
- var qs = styles.match( /@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi ),
- ql = qs && qs.length || 0,
- //try to get CSS path
- href = href.substring( 0, href.lastIndexOf( "/" )),
- repUrls = function( css ){
- return css.replace( /(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g, "$1" + href + "$2$3" );
- },
- useMedia = !ql && media,
- //vars used in loop
- i = 0,
- j, fullq, thisq, eachq, eql;
-
- //if path exists, tack on trailing slash
- if( href.length ){ href += "/"; }
-
- //if no internal queries exist, but media attr does, use that
- //note: this currently lacks support for situations where a media attr is specified on a link AND
- //its associated stylesheet has internal CSS media queries.
- //In those cases, the media attribute will currently be ignored.
- if( useMedia ){
- ql = 1;
- }
-
-
- for( ; i < ql; i++ ){
- j = 0;
-
- //media attr
- if( useMedia ){
- fullq = media;
- rules.push( repUrls( styles ) );
- }
- //parse for styles
- else{
- fullq = qs[ i ].match( /@media *([^\{]+)\{([\S\s]+?)$/ ) && RegExp.$1;
- rules.push( RegExp.$2 && repUrls( RegExp.$2 ) );
- }
-
- eachq = fullq.split( "," );
- eql = eachq.length;
-
- for( ; j < eql; j++ ){
- thisq = eachq[ j ];
- mediastyles.push( {
- media : thisq.split( "(" )[ 0 ].match( /(only\s+)?([a-zA-Z]+)\s?/ ) && RegExp.$2 || "all",
- rules : rules.length - 1,
- hasquery: thisq.indexOf("(") > -1,
- minw : thisq.match( /\(min\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/ ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" ),
- maxw : thisq.match( /\(max\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/ ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" )
- } );
- }
- }
-
- applyMedia();
- },
-
- lastCall,
-
- resizeDefer,
-
- // returns the value of 1em in pixels
- getEmValue = function() {
- var ret,
- div = doc.createElement('div'),
- body = doc.body,
- fakeUsed = false;
-
- div.style.cssText = "position:absolute;font-size:1em;width:1em";
-
- if( !body ){
- body = fakeUsed = doc.createElement( "body" );
- }
-
- body.appendChild( div );
-
- docElem.insertBefore( body, docElem.firstChild );
-
- ret = div.offsetWidth;
-
- if( fakeUsed ){
- docElem.removeChild( body );
- }
- else {
- body.removeChild( div );
- }
-
- //also update eminpx before returning
- ret = eminpx = parseFloat(ret);
-
- return ret;
- },
-
- //cached container for 1em value, populated the first time it's needed
- eminpx,
-
- //enable/disable styles
- applyMedia = function( fromResize ){
- var name = "clientWidth",
- docElemProp = docElem[ name ],
- currWidth = doc.compatMode === "CSS1Compat" && docElemProp || doc.body[ name ] || docElemProp,
- styleBlocks = {},
- lastLink = links[ links.length-1 ],
- now = (new Date()).getTime();
-
- //throttle resize calls
- if( fromResize && lastCall && now - lastCall < resizeThrottle ){
- clearTimeout( resizeDefer );
- resizeDefer = setTimeout( applyMedia, resizeThrottle );
- return;
- }
- else {
- lastCall = now;
- }
-
- for( var i in mediastyles ){
- var thisstyle = mediastyles[ i ],
- min = thisstyle.minw,
- max = thisstyle.maxw,
- minnull = min === null,
- maxnull = max === null,
- em = "em";
-
- if( !!min ){
- min = parseFloat( min ) * ( min.indexOf( em ) > -1 ? ( eminpx || getEmValue() ) : 1 );
- }
- if( !!max ){
- max = parseFloat( max ) * ( max.indexOf( em ) > -1 ? ( eminpx || getEmValue() ) : 1 );
- }
-
- // if there's no media query at all (the () part), or min or max is not null, and if either is present, they're true
- if( !thisstyle.hasquery || ( !minnull || !maxnull ) && ( minnull || currWidth >= min ) && ( maxnull || currWidth <= max ) ){
- if( !styleBlocks[ thisstyle.media ] ){
- styleBlocks[ thisstyle.media ] = [];
- }
- styleBlocks[ thisstyle.media ].push( rules[ thisstyle.rules ] );
- }
- }
-
- //remove any existing respond style element(s)
- for( var i in appendedEls ){
- if( appendedEls[ i ] && appendedEls[ i ].parentNode === head ){
- head.removeChild( appendedEls[ i ] );
- }
- }
-
- //inject active styles, grouped by media type
- for( var i in styleBlocks ){
- var ss = doc.createElement( "style" ),
- css = styleBlocks[ i ].join( "\n" );
-
- ss.type = "text/css";
- ss.media = i;
-
- //originally, ss was appended to a documentFragment and sheets were appended in bulk.
- //this caused crashes in IE in a number of circumstances, such as when the HTML element had a bg image set, so appending beforehand seems best. Thanks to @dvelyk for the initial research on this one!
- head.insertBefore( ss, lastLink.nextSibling );
-
- if ( ss.styleSheet ){
- ss.styleSheet.cssText = css;
- }
- else {
- ss.appendChild( doc.createTextNode( css ) );
- }
-
- //push to appendedEls to track for later removal
- appendedEls.push( ss );
- }
- },
- //tweaked Ajax functions from Quirksmode
- ajax = function( url, callback ) {
- var req = xmlHttp();
- if (!req){
- return;
- }
- req.open( "GET", url, true );
- req.onreadystatechange = function () {
- if ( req.readyState != 4 || req.status != 200 && req.status != 304 ){
- return;
- }
- callback( req.responseText );
- }
- if ( req.readyState == 4 ){
- return;
- }
- req.send( null );
- },
- //define ajax obj
- xmlHttp = (function() {
- var xmlhttpmethod = false;
- try {
- xmlhttpmethod = new XMLHttpRequest();
- }
- catch( e ){
- xmlhttpmethod = new ActiveXObject( "Microsoft.XMLHTTP" );
- }
- return function(){
- return xmlhttpmethod;
- };
- })();
-
- //translate CSS
- ripCSS();
-
- //expose update for re-running respond later on
- respond.update = ripCSS;
-
- //adjust on resize
- function callMedia(){
- applyMedia( true );
- }
- if( win.addEventListener ){
- win.addEventListener( "resize", callMedia, false );
- }
- else if( win.attachEvent ){
- win.attachEvent( "onresize", callMedia );
- }
-})(this);
+ //Set up the media query list
+ window.matchMedia = function(q){
+
+ var query, ls = [];
+
+ query = {
+ matches: false,
+ media: q,
+ addListener: function(listener) {
+ if (typeof listener === 'function') ls.push(listener);
+ },
+ removeListener: function(listener) {
+ for (var i=0,len=ls.length; i<len; i++) if (ls[i] === listener) delete ls[i];
+ }
+ };
+
+ query._listeners = ls;
+ query._matches = false;
+
+ //Parse the query
+ translate(q, '', '', query);
+
+ return query;
+ };
+
+ //define vars
+ var doc = win.document,
+ docElem = doc.documentElement,
+ mediastyles = [],
+ rules = [],
+ appendedEls = [],
+ parsedSheets = {},
+ resizeThrottle = 30,
+ head = doc.getElementsByTagName( "head" )[0] || docElem,
+ base = doc.getElementsByTagName( "base" )[0],
+ links = head.getElementsByTagName( "link" ),
+ requestQueue = [],
+
+ canMediaQuery,
+ refNode = docElem.firstElementChild || docElem.firstChild,
+ fakeBody = doc.createElement('body'), // fakeBody required for <FF4 when executed in <head>
+ div = doc.createElement('div'),
+
+ //feature detect media queries (we still need code for listeners though)
+ detectMediaQuery = function() {
+ div.id = 'mq-test-1';
+ div.style.cssText = "position:absolute;top:-100em";
+ fakeBody.appendChild(div);
+
+ div.innerHTML = '&shy;<style>@media only all {#mq-test-1 { width: 42px; }}</style>';
+
+ docElem.insertBefore(fakeBody, refNode);
+ canMediaQuery = div.offsetWidth == 42;
+ docElem.removeChild(fakeBody);
+ },
+
+ //loop stylesheets, send text content to translate
+ ripCSS = function(){
+ var sheets = links,
+ sl = sheets.length,
+ i = 0,
+ //vars for loop:
+ sheet, href, media, isCSS;
+
+ for( ; i < sl; i++ ){
+ sheet = sheets[ i ],
+ href = sheet.href,
+ media = sheet.media,
+ isCSS = sheet.rel && sheet.rel.toLowerCase() === "stylesheet";
+
+ //only links plz and prevent re-parsing
+ if( !!href && isCSS && !parsedSheets[ href ] ){
+ // selectivizr exposes css through the rawCssText expando
+ if (sheet.styleSheet && sheet.styleSheet.rawCssText) {
+ translate( sheet.styleSheet.rawCssText, href, media );
+ parsedSheets[ href ] = true;
+ } else {
+ if( (!/^([a-zA-Z:]*\/\/)/.test( href ) && !base)
+ || href.replace( RegExp.$1, "" ).split( "/" )[0] === win.location.host ){
+ requestQueue.push( {
+ href: href,
+ media: media
+ } );
+ }
+ }
+ }
+ }
+ makeRequests();
+ },
+
+ //recurse through request queue, get css text
+ makeRequests = function(){
+ if( requestQueue.length ){
+ var thisRequest = requestQueue.shift();
+
+ ajax( thisRequest.href, function( styles ){
+ translate( styles, thisRequest.href, thisRequest.media );
+ parsedSheets[ thisRequest.href ] = true;
+ makeRequests();
+ } );
+ }
+ },
+
+ //find media blocks in css text, convert to style blocks
+ translate = function( styles, href, media, query ){
+
+ var qs = styles.match( /@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi ),
+ ql = qs && qs.length || 0,
+ //try to get CSS path
+ href = href.substring( 0, href.lastIndexOf( "/" )),
+ repUrls = function( css ){
+ return css.replace( /(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g, "$1" + href + "$2$3" );
+ },
+ useMedia = !ql && media;
+
+
+ //vars used in loop
+ var i = 0, j, fullq, thisq, eachq, eql;
+
+ //if path exists, tack on trailing slash
+ if( href.length ){ href += "/"; }
+
+ //if no internal queries exist, but media attr does, use that
+ //note: this currently lacks support for situations where a media attr is specified on a link AND
+ //its associated stylesheet has internal CSS media queries.
+ //In those cases, the media attribute will currently be ignored.
+ if(query || useMedia ){
+ ql = 1;
+ }
+
+
+ for( ; i < ql; i++ ){
+ j = 0;
+
+ //Push the query object into the rules list instead of styles
+ if (query) {
+ fullq = query.media;
+ rules.push(query);
+ }
+ else {
+
+ //media attr
+ if( useMedia ){
+ fullq = media;
+ rules.push( repUrls( styles ) );
+ }
+ //parse for styles
+ else{
+ fullq = qs[ i ].match( /@media *([^\{]+)\{([\S\s]+?)$/ ) && RegExp.$1;
+ rules.push( RegExp.$2 && repUrls( RegExp.$2 ) );
+ }
+ }
+
+ eachq = fullq.split( "," );
+ eql = eachq.length;
+
+ for( ; j < eql; j++ ){
+ thisq = eachq[ j ];
+ mediastyles.push( {
+ media : thisq.split( "(" )[ 0 ].match( /(only\s+)?([a-zA-Z]+)\s?/ ) && RegExp.$2 || "all",
+ rules : rules.length - 1,
+ hasquery: thisq.indexOf("(") > -1,
+ minw : thisq.match( /\(min\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/ ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" ),
+ maxw : thisq.match( /\(max\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/ ) && parseFloat( RegExp.$1 ) + ( RegExp.$2 || "" )
+ } );
+ }
+ }
+
+ applyMedia();
+ },
+
+ lastCall,
+
+ resizeDefer,
+
+ // returns the value of 1em in pixels
+ getEmValue = function() {
+ var ret,
+ div = doc.createElement('div'),
+ body = doc.body,
+ fakeUsed = false;
+
+ div.style.cssText = "position:absolute;font-size:1em;width:1em";
+
+ if( !body ){
+ body = fakeUsed = doc.createElement( "body" );
+ }
+
+ body.appendChild( div );
+
+ docElem.insertBefore( body, docElem.firstChild );
+
+ ret = div.offsetWidth;
+
+ if( fakeUsed ){
+ docElem.removeChild( body );
+ }
+ else {
+ body.removeChild( div );
+ }
+
+ //also update eminpx before returning
+ ret = eminpx = parseFloat(ret);
+
+ return ret;
+ },
+
+ //cached container for 1em value, populated the first time it's needed
+ eminpx,
+
+ //enable/disable styles
+ applyMedia = function( fromResize ){
+ var name = "clientWidth",
+ docElemProp = docElem[ name ],
+ currWidth = doc.compatMode === "CSS1Compat" && docElemProp || doc.body[ name ] || docElemProp,
+ styleBlocks = {},
+ lastLink = links[ links.length-1 ],
+ now = (new Date()).getTime();
+
+ //throttle resize calls
+ if( fromResize && lastCall && now - lastCall < resizeThrottle ){
+ clearTimeout( resizeDefer );
+ resizeDefer = setTimeout( applyMedia, resizeThrottle );
+ return;
+ }
+ else {
+ lastCall = now;
+ }
+
+ for( var i in mediastyles ){
+ var thisstyle = mediastyles[ i ],
+ min = thisstyle.minw,
+ max = thisstyle.maxw,
+ minnull = min === null,
+ maxnull = max === null,
+ em = "em";
+
+ if( !!min ){
+ min = parseFloat( min ) * ( min.indexOf( em ) > -1 ? ( eminpx || getEmValue() ) : 1 );
+ }
+ if( !!max ){
+ max = parseFloat( max ) * ( max.indexOf( em ) > -1 ? ( eminpx || getEmValue() ) : 1 );
+ }
+
+ var rule = rules[thisstyle.rules];
+ if (rule._listeners) rule.matches = false;
+
+ // if there's no media query at all (the () part), or min or max is not null, and if either is present, they're true
+ if( !thisstyle.hasquery || ( !minnull || !maxnull ) && ( minnull || currWidth >= min ) && ( maxnull || currWidth <= max ) ){
+ if( !styleBlocks[ thisstyle.media ] ){
+ styleBlocks[ thisstyle.media ] = [];
+ }
+
+ if (rule._listeners) {
+ var listeners = rule._listeners;
+ rule.matches = true;
+ }
+ else {
+ styleBlocks[ thisstyle.media ].push(rule);
+ }
+ }
+ }
+
+ //remove any existing respond style element(s)
+ for( var i in appendedEls ){
+ if( appendedEls[ i ] && appendedEls[ i ].parentNode === head ){
+ head.removeChild( appendedEls[ i ] );
+ }
+ }
+
+ //inject active styles, grouped by media type
+ for( var i in styleBlocks ){
+ var ss = doc.createElement( "style" ),
+ css = styleBlocks[ i ].join( "\n" );
+
+ ss.type = "text/css";
+ ss.media = i;
+
+ //originally, ss was appended to a documentFragment and sheets were appended in bulk.
+ //this caused crashes in IE in a number of circumstances, such as when the HTML element had a bg image set, so appending beforehand seems best. Thanks to @dvelyk for the initial research on this one!
+ head.insertBefore( ss, lastLink.nextSibling );
+
+ if ( ss.styleSheet ){
+ ss.styleSheet.cssText = css;
+ }
+ else {
+ ss.appendChild( doc.createTextNode( css ) );
+ }
+
+ //push to appendedEls to track for later removal
+ appendedEls.push( ss );
+ }
+
+ //Loop through rules and raise listeners for any changes
+ for (var i=0,len=rules.length; i<len; i++) {
+ var rule = rules[i];
+ if (rule._listeners && rule.matches != rule._matches) {
+ rule._matches = rule.matches;
+ for (var j=0,len2=rule._listeners.length;j<len2;j++) {
+ if (rule._listeners[j]) rule._listeners[j](rule);
+ }
+ }
+ }
+ },
+ //tweaked Ajax functions from Quirksmode
+ ajax = function( url, callback ) {
+ var req = xmlHttp();
+ if (!req){
+ return;
+ }
+ req.open( "GET", url, true );
+ req.onreadystatechange = function () {
+ if ( req.readyState != 4 || req.status != 200 && req.status != 304 ){
+ return;
+ }
+ callback( req.responseText );
+ }
+ if ( req.readyState == 4 ){
+ return;
+ }
+ req.send( null );
+ },
+ //define ajax obj
+ xmlHttp = (function() {
+ var xmlhttpmethod = false;
+ try {
+ xmlhttpmethod = new XMLHttpRequest();
+ }
+ catch( e ){
+ xmlhttpmethod = new ActiveXObject( "Microsoft.XMLHTTP" );
+ }
+ return function(){
+ return xmlhttpmethod;
+ };
+ })();
+
+ //Determine if supports media queries (but doesnt support matchMedia eg IE9)
+ detectMediaQuery();
+
+ //expose update for re-running respond later on
+ respond.update = function() {
+ (canMediaQuery) ? applyMedia() : ripCSS();
+ }
+
+ respond.update();
+
+ //adjust on resize
+ function callMedia(){
+ applyMedia( true );
+ }
+
+ if( win.addEventListener ){
+ win.addEventListener( "resize", callMedia, false );
+ }
+ else if( win.attachEvent ){
+ win.attachEvent( "onresize", callMedia );
+ }
+})(this);
View
24 test/test.html
@@ -17,4 +17,28 @@
<p id="attribute-test">Media-attributes are working too! This should be visible above 37.5em.</p>
</body>
+<footer></footer>
+
+<script>
+
+ var mql = window.matchMedia('only screen and (min-width: 320px)'),
+ mql2 = window.matchMedia('only screen and (min-width: 768px)'),
+ mql3 = window.matchMedia('only screen and (min-width: 1024px)');
+
+ mql.addListener(listen);
+ mql2.addListener(listen);
+ mql3.addListener(listen);
+
+ function listen(arg) {
+
+ var build = '';
+
+ if (mql.matches) build+='<p>' + mql.media + '</p>';
+ if (mql2.matches) build+='<p>' + mql2.media + '</p>';
+ if (mql3.matches) build+='<p>' + mql3.media + '</p>';
+
+ document.getElementsByTagName('footer')[0].innerHTML = build;
+ }
+
+</script>
</html>
Something went wrong with that request. Please try again.