检测位置：用javascript修复答案

【问题标题】：Detect position:fixed with javascript检测位置：用javascript修复
【发布时间】：2011-05-10 11:00:34
【问题描述】：

我正在尝试从这里使用 Kangax 的脚本：http://kangax.github.com/cft/ 来检测那些“正确”实现 position:fixed 的浏览器，就像桌面浏览器一样，与移动浏览器相比，我可以使用 jQuery 在移动浏览器上伪造它。

Kangax 的代码运行良好。但是，当我将它合并到我的页面中时，它不会。我认为这一定是一些明显的错误。任何帮助将不胜感激！

////Detect whether position:fixed works (mobile browsers). Use JS to position #navwrap if not.
  //Kangax's script - begins at "function" on the next line.
function detected() {
    var container = document.body;
    if (document.createElement &&
    container && container.appendChild && container.removeChild) {
        var el = document.createElement("div");
        if (!el.getBoundingClientRect) {
            return null;
        }
        el.innerHTML = "x";
        el.style.cssText = "position:fixed;top:100px;";
        container.appendChild(el);
        var originalHeight = container.style.height, originalScrollTop = container.scrollTop;
        container.style.height = "3000px";
        container.scrollTop = 500;
        var elementTop = el.getBoundingClientRect().top;
        container.style.height = originalHeight;
        var isSupported = elementTop === 100;
        container.removeChild(el);
        container.scrollTop = originalScrollTop;
        return isSupported;
    }
    return null;
};
if (detected()) {
    alert ('non-mobile');
}
    else {
        alert ('mobile');
    }

如果有帮助，原始代码（尽可能剥离）：

<body>
<h2>Position Fixed Test</h2>    

<script>    
(function(__global){
// make sure `window` resolves to a global object
var window = this;
var features = { };
features.IS_POSITION_FIXED_SUPPORTED = (features.__IS_POSITION_FIXED_SUPPORTED = function () {
var container = document.body;
if (document.createElement &&
  container && container.appendChild && container.removeChild) {
  var el = document.createElement("div");
  if (!el.getBoundingClientRect) {
      return null;
  }
  el.innerHTML = "x";
  el.style.cssText = "position:fixed;top:100px;";
  container.appendChild(el);
  var originalHeight = container.style.height, originalScrollTop = container.scrollTop;
  container.style.height = "3000px";
  container.scrollTop = 500;
  var elementTop = el.getBoundingClientRect().top;
  container.style.height = originalHeight;
  var isSupported = elementTop === 100;
  container.removeChild(el);
  container.scrollTop = originalScrollTop;
  return isSupported;
}
return null;
})();
__global.__features = features;
})(this);

(function(){
function detect() {
 for (var i=0; i<1; i++) {
  var testResult = __features['IS_POSITION_FIXED_SUPPORTED'];
  alert ( testResult );
  i++;
 }
};
detect(); 
})();
</script>

</body>

【问题讨论】：

kangax.github.com/cft 上的原始示例成功区分了桌面浏览器和移动浏览器，但我的没有。我想我没有正确测试 null vs isSupported？？
你在什么时候看到了什么
我总是收到“不支持”的警报。我在上面添加了原始代码。该代码可以判断浏览器是否是移动的。我的不能。干杯。

标签： javascript jquery mobile

【解决方案1】：

我猜你总是收到non-mobile。您正在检查 detected 是否存在未执行该函数。将 JavaScript 的结尾更改为

if (detected()) {
  alert ('non-mobile');
}
else {
    alert ('mobile');
}

是否有理由将函数创建为分配给变量的匿名函数而不是命名函数，例如

function detected(){
  // Function content.
}

【讨论】：

感谢您的回复。我合并了它，但没有改变:(我还更正了命名函数 vs var - 只是新手。
你得到了什么结果？您提供的代码对我来说很好http://jsfiddle.net/seRr3/。您收到什么警报？
@phil - 将函数声明为变量并没有错，只是您只能在函数范围内调用该函数。
您绝对正确，它运行并提供警报 - 但不是我所期望的。无论我是在移动设备还是台式机上进行测试，我都会得到“非移动设备”。但是，当我在 kangax.github.com/cft 上运行原始脚本时，它会成功区分它们 - 请参阅 stickmanphotography.co.uk/box/ipad.png 和 stickmanphotography.co.uk/box/desktop.png 了解原始输出。

【解决方案2】：

已排序。感谢您的输入。

原来我的代码版本运行良好，但它必须放在页面的正文中。如果它在 Head 中，即使在 DOM Ready 调用中也不会。

现在就必须找出原因！但至少代码有效。

【讨论】：