CSS“位置：固定”：移动缩放

Question

我正在尝试解决移动浏览器上 css“位置：固定”属性的问题。我有一个固定的 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

如果缩放处于活动状态，您想捕捉吗？

没有 window.onZoom 监听器，但你可以阅读这个帖子： Catch browser's "zoom" event in JavaScript

这个答案：https://stackoverflow.com/a/995967/3616853

没有办法主动检测是否有缩放。我在这里找到了一个关于如何尝试实现它的好条目。 我发现了两种检测缩放级别的方法。检测缩放级别变化的一种方法依赖于百分比值未缩放的事实。百分比值是相对于视口宽度的，因此不受页面缩放的影响。如果您插入两个元素，一个以百分比表示位置，另一个以像素表示相同位置，当页面缩放时，它们将分开。找到两个元素的位置之间的比率，你就得到了缩放级别。见测试用例。 http://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3 您也可以使用上述帖子的工具来完成。问题是您或多或少地对页面是否缩放进行了有根据的猜测。这在某些浏览器中会比其他浏览器更好。 如果他们在缩放时加载您的页面，则无法判断页面是否已缩放。

Answer 2

只是一个理论，但您可能想尝试以 % 而不是 px 设置底部/右侧位置。

我认为您在使用像素测量时看到的只是影响像素的缩放。或者说得更好一点，当您放大像素时，像素会显得更大，这会偏离元素的位置，甚至在较小的屏幕上将其推出视口。

Example using pixel positioning
请注意，即使在桌面上，当您放大和缩小时，元素似乎也会上下移动？

Example using percent positioning
在此示例中，元素似乎停留在右下角，因为它始终位于距视口底部 10% 的位置。

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

Answer 3

为徽标和页面的其余部分设置两个不同的 z-index 会有所帮助。仅允许缩放到页面的其余部分，而不是缩放到包含徽标的 z-index 层。因此，这可能不会影响徽标的拉伸。

我们可以

1. 实现 ZOOM 侦听器
2. 将其附加到浏览器
3. 使缩放侦听器使用 z-index 作为因子更改元素的缩放级别（修改元素位置）。

Answer 4

好的，这就是我解决问题的方法......我希望这可以帮助任何人在 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';
}