在移動設備上的縮放瀏覽器窗口上固定位置 div

Question

在桌面瀏覽器中縮放 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，但在正確滾動后我還沒有設法獲得高度位置，我也嘗試過：

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 更感興趣。

Answer 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