public
Last active

Custom Modernizr tests that are useful.

  • Download Gist
modernizr-tests.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
/* modernizr-test.js
* Daniel Ott
* 3 March 2011
* Custom Tests using Modernizr's addTest API
*/
 
/* iOS
* There may be times when we need a quick way to reference whether iOS is in play or not.
* While a primative means, will be helpful for that.
*/
Modernizr.addTest('ipad', function () {
return !!navigator.userAgent.match(/iPad/i);
});
 
Modernizr.addTest('iphone', function () {
return !!navigator.userAgent.match(/iPhone/i);
});
 
Modernizr.addTest('ipod', function () {
return !!navigator.userAgent.match(/iPod/i);
});
 
Modernizr.addTest('appleios', function () {
return (Modernizr.ipad || Modernizr.ipod || Modernizr.iphone);
});
 
/* CSS position:fixed
* Not supported in older IE browsers, nor on Apple's iOS devices.
* Actually the token example on the Modernizr docs. http://www.modernizr.com/docs/
*/
Modernizr.addTest('positionfixed', function () {
var test = document.createElement('div'),
control = test.cloneNode(false),
fake = false,
root = document.body || (function () {
fake = true;
return document.documentElement.appendChild(document.createElement('body'));
}());
 
var oldCssText = root.style.cssText;
root.style.cssText = 'padding:0;margin:0';
test.style.cssText = 'position:fixed;top:42px';
root.appendChild(test);
root.appendChild(control);
var ret = test.offsetTop !== control.offsetTop;
 
root.removeChild(test);
root.removeChild(control);
root.style.cssText = oldCssText;
if (fake) {
document.documentElement.removeChild(root);
}
/* Uh-oh. iOS would return a false positive here.
* If it's about to return true, we'll explicitly test for known iOS User Agent strings.
* "UA Sniffing is bad practice" you say. Agreeable, but sadly this feature has made it to
* Modernizr's list of undectables, so we're reduced to having to use this. */
return ret && !Modernizr.appleios;
});

But...but...but...!

Modernizr.appleios isn't sufficient, since ios5+ incorporates (true) position fixed.

See the famous threads: https://github.com/Modernizr/Modernizr/issues/167 and https://github.com/Modernizr/Modernizr/pull/539

But as a gist this is a nice reference doc that could be increased.

For determining mobile see: http://stackoverflow.com/questions/16279522/yepnope-modernizr-screen-width-conditions

Basically:
{
test: Modernizr.mq('all and (max-width: 1070px)'),
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.