Feature detection for position: fixed

孤街浪徒 提交于 2019-12-04 22:00:09

问题


I am trying to find a script that detects if a device places position: fixed elements relative to the ViewPort and not to the entire document.

Currently, standard desktop browsers and Mobile Safari (for iOS 5) do so, whereas Android devices place the fixed elements relative to the entire document.

I have found a couple of tests to detect this, but none of the seem to work:

  • http://kangax.github.com/cft/ Gives me a false positive when I pass it from an Android device.
  • https://gist.github.com/1221602 Gives me a false negative when I pass it in an iPhone with iOS 5.

Does anybody know where to find / how to write a test that actually detects that? I don't want to rely on browser sniffing.


回答1:


According to the contributors at Modernizr, you cannot do this without detecting the browser in use. The contributors are quite well-established in the field.

Testing for position: fixed on iOS and Android devices is listed under the Undetectables wiki page in the Modernizr project.

The MobileHTML5 website lists the support for position:fixed. http://mobilehtml5.org/




回答2:


Actually, the guys from the Filament Group did a smart thing with their Fixedfixed putting the user agent string of known false positives in their test.

Check it @ http://github.com/filamentgroup/fixed-fixed

Someone could complete it with some false negatives too, and make it a modernizr aditional featur test.




回答3:


I've created another check if position:fixed is really supported in browser. It creates fixed div and try to scroll and check if the position of div changed.

function isPositionFixedSupported(){
    var el = jQuery("<div id='fixed_test' style='position:fixed;top:1px;width:1px;height:1px;'></div>");
    el.appendTo("body");

    var prevScrollTop = jQuery(document).scrollTop();
    var expectedResult = 1+prevScrollTop;
    var scrollChanged = false;

    //simulate scrolling
    if (prevScrollTop === 0) {
        window.scrollTo(0, 1);
        expectedResult = 2;
        scrollChanged = true;
    }

    //check position of div
    suppoorted = (el.offset().top === expectedResult);

    if (scrollChanged) {
        window.scrollTo(0, prevScrollTop);
    }

    el.remove();

    return suppoorted;
}

This function was tested in Firefox 22, Chrome 28, IE 7-10, Android Browser 2.3.



来源:https://stackoverflow.com/questions/9979584/feature-detection-for-position-fixed

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!