Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

for internal review: updated our $.mobile.media function #5233

Merged
merged 1 commit into from

2 participants

@scottjehl

updated our $.mobile.media function to use the matchMedia polyfill, which defers to the native function where possible. $.mobile.media still returns a boolean as it always has, but now, window.matchMedia is exposed in unsupporting environments too, which gives developers access to its standard API that returns an object, and in native implementations, supports listeners as well (a polyfill is available for that part too). This addresses issue #4979

Care to take a look, @johnbender ?

Scott Jehl updated our $.mobile.media function to use the matchMedia polyfill, w…
…hich defers to the native function where possible. $.mobile.media still returns a boolean as it always has, but now, window.matchMedia is exposed in unsupporting environments too, which gives developers access to its standard API that returns an object, and in native implementations, supports listeners as well (a polyfill is available for that part too). This addresses issue #4979
497b82a
@toddparker

@scottjehl - if there isn't any negative impact to landing this (and test pass), let's do that. Seems like it works as it does currently but leverages native when possible, right?

@scottjehl scottjehl merged commit 555e07a into master
@jaspermdegroot jaspermdegroot deleted the mobile-media-refactor branch
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Sep 13, 2012
  1. updated our $.mobile.media function to use the matchMedia polyfill, w…

    Scott Jehl authored
    …hich defers to the native function where possible. $.mobile.media still returns a boolean as it always has, but now, window.matchMedia is exposed in unsupporting environments too, which gives developers access to its standard API that returns an object, and in native implementations, supports listeners as well (a polyfill is available for that part too). This addresses issue #4979
This page is out of date. Refresh to see the latest.
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);
Something went wrong with that request. Please try again.