javascript - 使用javascript检测ie10 Metro地址栏是否存在

Question

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

我们目前使用的 div 绝对定位如下

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

除了 Metro(现代)模式下的 IE10 之外，这在所有浏览器中都运行良好。

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

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

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

Answer 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% 可靠，显然有一些交互会折叠地址栏，但不会触发事件。我正在研究更好的解决方案，一旦找到就会更新，但我想我会分享这个以让事情顺利进行。