diff --git a/js/jquery.mobile.media.js b/js/jquery.mobile.media.js index 73b680290cb..b21de247deb 100644 --- a/js/jquery.mobile.media.js +++ b/js/jquery.mobile.media.js @@ -8,43 +8,44 @@ define( [ "jquery", "./jquery.mobile.core" ], function( $ ) { //>>excludeEnd("jqmBuildExclude"); (function( $, undefined ) { -var $window = $( window ), - $html = $( "html" ); - -/* $.mobile.media method: pass a CSS media type or query and get a bool return - note: this feature relies on actual media query support for media queries, though types will work most anywhere - examples: - $.mobile.media('screen') // tests for screen media type - $.mobile.media('screen and (min-width: 480px)') // tests for screen media type with window width > 480px - $.mobile.media('@media screen and (-webkit-min-device-pixel-ratio: 2)') // tests for webkit 2x pixel ratio (iPhone 4) -*/ -$.mobile.media = (function() { - // TODO: use window.matchMedia once at least one UA implements it - var cache = {}, - testDiv = $( "
" ), - fakeBody = $( "" ).append( testDiv ); - - return function( query ) { - if ( !( query in cache ) ) { - var styleBlock = document.createElement( "style" ), - cssrule = "@media " + query + " { #jquery-mediatest { position:absolute; } }"; - - //must set type for IE! - styleBlock.type = "text/css"; - - if ( styleBlock.styleSheet ) { - styleBlock.styleSheet.cssText = cssrule; - } else { - styleBlock.appendChild( document.createTextNode(cssrule) ); - } - - $html.prepend( fakeBody ).prepend( styleBlock ); - cache[ query ] = testDiv.css( "position" ) === "absolute"; - fakeBody.add( styleBlock ).remove(); - } - return cache[ query ]; + /*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */ + window.matchMedia = window.matchMedia || (function( doc, undefined ) { + + "use strict"; + + var bool, + docElem = doc.documentElement, + refNode = docElem.firstElementChild || docElem.firstChild, + // fakeBody required for + fakeBody = doc.createElement( "body" ), + div = doc.createElement( "div" ); + + div.id = "mq-test-1"; + div.style.cssText = "position:absolute;top:-100em"; + fakeBody.style.background = "none"; + fakeBody.appendChild(div); + + return function(q){ + + div.innerHTML = "­"; + + docElem.insertBefore( fakeBody, refNode ); + bool = div.offsetWidth === 42; + docElem.removeChild( fakeBody ); + + return { + matches: bool, + media: q + }; + + }; + + }( document )); + + // $.mobile.media uses matchMedia to return a boolean. + $.mobile.media = function( q ) { + return window.matchMedia( q ).matches; }; -})(); })(jQuery); //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);