Skip to content
Browse files

Merge pull request #5233 from jquery/mobile-media-refactor

Updated our $.mobile.media function to match the current window.matchMedia specification. As a result, no changes will occur in the input/output of $.mobile.media, but this does expose a polyfill of window.matchMedia in non-supporting browsers that support media queries. fixes #4979
  • Loading branch information...
2 parents ef88caf + 497b82a commit 555e07a1cb3065456bb8f0ee6fba2293ee5bb38b Scott Jehl committed Nov 20, 2012
Showing with 37 additions and 36 deletions.
  1. +37 −36 js/jquery.mobile.media.js
View
73 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 = $( "<div id='jquery-mediatest'></div>" ),
- fakeBody = $( "<body>" ).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 <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.style.background = "none";
+ 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 ));
+
+ // $.mobile.media uses matchMedia to return a boolean.
+ $.mobile.media = function( q ) {
+ return window.matchMedia( q ).matches;
};
-})();
})(jQuery);
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);

0 comments on commit 555e07a

Please sign in to comment.
Something went wrong with that request. Please try again.