Created
March 4, 2011 16:55
-
-
Save danott/855078 to your computer and use it in GitHub Desktop.
Custom Modernizr tests that are useful.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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 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)'),
}
These tests are outdated in 2015. Simply relying on the UserAgent String isn't enough since Microsoft injected the word iPhone
in IE user agent. https://msdn.microsoft.com/en-us/library/hh869301(v=vs.85).aspx (look for the word iPhone)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
But...but...but...!
Modernizr.appleios isn't sufficient, since ios5+ incorporates (true) position fixed.
See the famous threads: Modernizr/Modernizr#167 and Modernizr/Modernizr#539