javascript - CSS "position:fixed": mobile zoom

Question

我正在尝试解决移动浏览器上 css“position:fixed”属性的问题。我有一个固定的 div:

<div id="logo">
...other content here...
</div>

使用 CSS:

#logo{
    position: fixed;
    -webkit-backface-visibility: hidden;
    bottom: 100px;
    right: 0px;
    width: 32px;
    height: 32px;
}

因此，通常行为完全符合预期，div 位置始终位于窗口的右下角，与滚动位置无关。我的问题是，在移动浏览器上，当用户缩放页面时，在一定缩放级别后 div 位置是错误的(有时 div 会消失在窗口之外)。

我知道移动浏览器不能很好地支持固定位置，但我想知道是否有一些解决方法。我尝试使用此 js 代码 onScroll 事件:

window.addEventListener('scroll', function(e){
    drag.style['-webkit-transform'] = 'scale(' +window.innerWidth/document.documentElement.clientWidth + ')';\\I want to avoid zoom on this element
    var r = logo.getBoundingClientRect();
    var w = window.innerWidth;
    var h = window.innerHeight;
    if(r.right != w){
        rOff = r.right - w;
        logo.style.right = rOff;
    }
    if(r.top+132 != h){\
        tOff = r.top + 132 - h;
        logo.style.bottom = tOff;
    }
});

不幸的是，代码似乎返回了错误的位置。

有人有什么建议吗？

Answer 1

好的，这就是我解决问题的方法......我希望这可以帮助任何人在 iOS 设备上模拟固定位置。

1. 我将位置从固定位置切换为绝对位置；
2. 在页面滚动或缩放时附加到窗口监听器以获取新位置，使用以下函数设置 window.onscroll 和 window.onresize 事件:

function position() {
    drag.style.left = window.innerWidth + window.pageXOffset - 32 + 'px';
    drag.style.top = window.innerHeight + window.pageYOffset - 132 + 'px';
}