Modernizr position fixed test incomplete
Modernizr is great but the example test for position: fixed
is quite incomplete:
- iOS 4 and lower returns
true
while it doesn't supportposition: fixed
- Opera on Windows returns
false
while it does supportposition: fixed
I found another test based on the Modernizr test but with iOS detection added: https://gist.github.com/855078/109ded4b4dab65048a1e7b4f4bd94c93cebb26b8.
It isn't really future proof since the upcoming iOS 5 does support position: fixed
.
Can you guys hel开发者_如何学Cp me find a way to test position fixed in iOS without browser sniffing?
// Test for position:fixed support
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);
}
return ret;
});
I wrote this test for iOS: http://mnobeta.no/2011/09/test-position-fixed-for-iphone/
It is a bit messy, but seems to work. Android is still a problem because of its "fake" position:fixed
.
I have found that you need to insert some hacks to get a functional positionFixed test. For example i have inserted a hack into my test that returns true for iOS deviced running v.5 or above:
/*iPhone/iPad Hack*/
if(navigator.userAgent.match(/iPad|iPhone/i) !== null){
/*Check if device runs iOS 5 or higher*/
isSupported = navigator.userAgent.match(/[5-9]_[0-9]/) !== null;
}
I'm not sure how "clean" this code is, but it does the trick for me.
精彩评论