CSS "position:fixed"：移动缩放

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设备上模拟固定位置。

当页面滚动或缩放时，window侦听器将位置从固定切换为absolute;

• Attach，以获得新位置，并使用以下函数设置window.onscroll和window.onresize事件：

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

Answer 2

是否要捕捉缩放是否处于活动状态？

这里没有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 3

这只是一个理论，但您可能想尝试以%为单位设置底部/右侧位置，而不是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;
}