位置固定的特征检测

Question

我正在寻找一个脚本，可以检测设备是否将position: fixed元素相对于视口而不是整个文档来定位。目前，标准的桌面浏览器和移动Safari（适用于iOS 5）会这样做，而Android设备会将固定元素相对于整个文档定位。我已经找到了一些测试来检测这个问题，但似乎都无法正常工作：1.http://kangax.github.com/cft/在从Android设备传递时会给出错误结果；2.https://gist.github.com/1221602在使用iOS 5的iPhone上传递时会给出错误结果。有人知道在哪里可以找到/如何编写一个真正检测这个问题的测试吗？我不想依赖于浏览器嗅探。

- pau.moreno

Answer 1

根据Modernizr贡献者的说法，您无法在不检测所使用的浏览器的情况下完成此操作。这些贡献者在该领域非常有影响力。

在Modernizr项目的Undetectables wiki页面中列出了对iOS和Android设备中position:fixed的测试。 MobileHTML5网站列出了对position:fixed的支持情况。http://mobilehtml5.org/

- sirhc

Answer 2

事实上，Filament Group的Fixedfixed在测试中将已知的误报用户代理字符串放入了其中，做得很聪明。

请查看 @ http://github.com/filamentgroup/fixed-fixed

有人可以加入一些错误的负面情况，使其成为Modernizr的附加特性测试。

- Mister Crimson

Answer 3

我创建了一个检查程序，用于确定浏览器是否真正支持position:fixed。它创建一个固定的

元素，并尝试滚动并检查

元素的位置是否发生变化。

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浏览器2.3中进行了测试。

- pulzarraider