用javascript检测ie10 Metro地址栏的存在答案

【问题标题】：Detect the presence of the ie10 metro address bar with javascript用javascript检测ie10 Metro地址栏的存在
【发布时间】：2013-03-16 01:35:31
【问题描述】：

我有一个网站，在固定在屏幕底部的 div 中有一些号召性用语按钮。

我们目前正在使用一个绝对定位如下的div

<div id="buttonBar">footer code</div>
<style>#buttonBar{ bottom: 0; width: 100%;  position: fixed; }</style>

这在所有浏览器中都运行良好，除了地铁（现代）模式下的 IE10。

点击链接时，地址栏显示并覆盖按钮栏，然后消失

除了重新设计页面布局之外，我希望按钮栏在显示时位于地址栏的正上方。

有谁知道使用javascript检测地址栏是否可见的方法？

【问题讨论】：

标签： javascript internet-explorer

【解决方案1】：

您可以尝试将页脚移到位置栏上方，直到位置栏塌陷，然后将页脚放回下方。这是一个潜在的解决方案：

1。如果用户可能在支持 IE10 触控的浏览器上，则将页脚向上移动 50 像素（或其他）

if (!!window.navigator.msPointerEnabled) { // sniff for IE10 + touch
    $("#buttonBar").css("transform", "translateY(-50px)");
}

2。监听与浏览器的第一次交互，然后用位置栏折叠页脚。

$("body").on("MSGestureStart MSInertiaStart MSGestureTap MSPointerDown", function () {
  $("body").off("MSGestureStart MSInertiaStart MSGestureTap MSPointerDown");
  $("#buttonBar").css("transform","translateY(0)");
});

此解决方案并非 100% 可靠，显然有一些交互会折叠位置栏但不会触发事件。我正在研究一个更好的解决方案，一旦找到就会更新，但我想我会分享这个来让事情顺利进行。

【讨论】：