Question

我正在尝试查找一个脚本，用于检测设备是否相对于ViewPort放置position: fixed元素而不是整个文档。

目前，标准桌面浏览器和Mobile Safari（适用于iOS 5）都这样做，而Android设备则将固定元素相对于整个文档放置。

我已经找到了几个检测这个的测试，但似乎没有一个可行：

http://kangax.github.com/cft/当我从Android设备传递它时，给我一个误报。
https://gist.github.com/1221602当我在带有iOS 5的iPhone中传递它时，给我一个误报。

是否有人知道在哪里找到/如何编写实际检测到的测试？我不想依赖浏览器嗅探。

Answer 1

根据Modernizr的贡献者，如果不检测正在使用的浏览器，则无法执行此操作。贡献者在该领域非常成熟。

在iOS和Android设备上测试position: fixed列在Modernizr项目的Undetectables wiki page下。

MobileHTML5 website列出了对position:fixed的支持。 http://mobilehtml5.org/

Answer 2

实际上，来自Filament Group的人们用他们的Fixedfixed做了一件很聪明的事情，在他们的测试中放入了已知误报的用户代理字符串。

检查@ http://github.com/filamentgroup/fixed-fixed

有人可以用一些假阴性来完成它，并使其成为现代化的附加特征测试。

Answer 3

如果浏览器确实支持position:fixed，我已创建了另一项检查。它创建固定的div并尝试滚动并检查div的位置是否发生了变化。

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;
}

此功能已在Firefox 22，Chrome 28，IE 7-10，Android Browser 2.3中进行了测试。

位置特征检测：固定

3 个答案: