javascript - 手机上缩放的浏览器窗口上的固定位置div(Fixed position div on zoomed browser window on mobile)

Question

When zooming an HTML page in a desktop browser a fixed position div will scale like the rest of the page and keep its position fixed relative to the viewport.

(在桌面浏览器中缩放HTML页面时，固定位置div会像页面的其余部分一样缩放，并保持其相对于视口的位置固定。)

This used to also be the case on the Chrome mobile browser (It still behaved that way in version 39), but on Chrome for mobile 40 it started behaving similar to Safari for mobile and when the page is scaled fixed elements are fixed to the scaled document at the point that they would have been positioned at if the page were at 100% zoom (with some caveats).

(在Chrome移动浏览器上也是如此（在版本39中仍然如此），但是在移动版Chrome 40上，它开始表现出与移动版Safari相似的功能，并且在缩放页面时，固定元素也固定为缩放如果页面以100％缩放（带有一些警告），文档将被定位在该位置。)

This is a page with a div with position:fixed http://betterstatistics.org/tests/fixedpos

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

For mobile I scale the div according to zoom, and keeping the position:fixed property so that I don't have to reposition it on scroll, I would like to set the position according to the zoom.

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

Here is my attempt: http://betterstatistics.org/tests/fixedpos/attempt001.html (for mobile only)

(这是我的尝试： http : //betterstatistics.org/tests/fixedpos/attempt001.html （仅适用于移动设备）)

The relevant lines:

(相关行：)

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;
}

It almost works on Android Chrome for mobile, but I haven't managed to get the height position after scrolling correct, I also tried:

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

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

and:

(和：)

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

I know there are some similar questions, but most are in JQuery, and I didn't see one with a solution, they were also mostly concerning iOS, but for now I am more interested in Android Chrome.

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

  ask by Piwakawaka translate from so

Answer 1

With the new object visualViewport you can now get the visual viewport offset relative to the layout viewport:

(使用新的对象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