固定位置 div 在移动设备上缩放的浏览器窗口答案

【问题标题】：Fixed position div on zoomed browser window on mobile固定位置 div 在移动设备上缩放的浏览器窗口
【发布时间】：2015-03-25 12:25:54
【问题描述】：

在桌面浏览器中缩放 HTML 页面时，固定位置的 div 将像页面的其余部分一样缩放，并保持其相对于视口的位置固定。这曾经在 Chrome 移动浏览器上也是这种情况（它在版本 39 中仍然如此），但在 Chrome for mobile 40 上它开始表现类似于 Safari for mobile 并且当页面缩放时，固定元素固定为缩放如果页面以 100% 缩放（有一些警告），它们将被定位到的位置。

这是一个带有位置的 div 的页面：固定 http://betterstatistics.org/tests/fixedpos

对于移动设备，我根据缩放比例缩放 div，并保留 position:fixed 属性，这样我就不必在滚动时重新定位它，我想根据缩放设置位置。

这是我的尝试： http://betterstatistics.org/tests/fixedpos/attempt001.html（仅限手机）

相关行：

orig_w = 300;
orig_h = 100;
document.body.addEventListener('touchend', repositionDiv);

function repositionDiv(){
  var zoom = getZoom();
  var d1 = document.getElementById("div_br");
  var w = (orig_w / zoom);
  var h = (orig_h / zoom);
  d1.style.width = w + 'px';
  d1.style.height = h + 'px';
  d1.style.left = (window.scrollX + window.innerWidth - d1.offsetWidth) +'px';
  d1.style.top = (window.innerHeight - d1.offsetHeight) +'px';
}

function getZoom(){
  return document.documentElement.clientWidth / window.innerWidth;
}

它几乎可以在 Android Chrome for mobile 上运行，但是滚动正确后我没有设法获得高度位置，我也尝试过：

d1.style.top = (window.scrollY + window.innerHeight - d1.offsetHeight) +'px';

和：

d1.style.top = (window.scrollY / zoom + window.innerHeight - d1.offsetHeight) +'px';

我知道有一些类似的问题，但大多数都在 JQuery 中，我没有看到有解决方案的问题，它们也主要与 iOS 有关，但现在我对 Android Chrome 更感兴趣。

【问题讨论】：

此代码可以使用绝对位置并在滚动事件上调用 repositionDiv 函数来工作。您可以在滚动发生时隐藏元素以停止跳跃。或者，您可以等待 position:device-fixed 按照 2010 年 quirksmode 的建议实施：quirksmode.org/blog/archives/2010/12/the_fifth_posit.html 看起来可能会发生，请参阅 cmets on：plus.google.com/+RickByers/posts/bpxrWN4G3X5

标签： javascript css css-position chrome-for-android

【解决方案1】：

使用新对象visualViewport，您现在可以获得相对于布局视口的视觉视口偏移：

<style>
#windowtop {
    width: 100%;
    height: 20px;
    position: fixed;
    top: 0px;
}
</style>


<div id="windowtop">
fixed
</div>

<script>
    if (window.visualViewport) {
        var windowtop = document.getElementById("windowtop");

        function onWindowScroll() {
            windowtop.style.top = window.visualViewport.offsetTop + "px";
            windowtop.style.left = window.visualViewport.offsetLeft + "px";
            windowtop.style.width = window.visualViewport.width + "px";
        }
        onWindowScroll();
        window.visualViewport.addEventListener("resize", onWindowScroll);
        window.visualViewport.addEventListener("scroll", onWindowScroll);
        // https://developers.google.com/web/updates/2017/09/visual-viewport-api#gotchas
        window.addEventListener('scroll', onWindowScroll);
    }

</script>

<br>
<br>
BEGIN
<br>
<div style="height: 1500px;">
</div>
<br>
END

【讨论】：