位置特征检测：固定答案

【问题标题】：Feature detection for position: fixed位置特征检测：固定
【发布时间】：2012-04-16 07:11:26
【问题描述】：

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

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

我找到了几个测试来检测这一点，但似乎没有一个有效：

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

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

【问题讨论】：

标签： javascript mobile feature-detection

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案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 中测试。

【讨论】：