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

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

没有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

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

我将位置从固定切换到绝对;
在页面滚动或缩放时，向窗口附加一个侦听器以获取新位置，使用以下函数设置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 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;
}

Answer 4

徽标 两个不同的z-index ，页面的其余部分可以提供帮助。仅允许缩放到页面的其余部分，而不允许缩放到包含徽标的z-index图层。因此，这可能不会影响徽标的拉伸。

我们可以

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

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

4 个答案: