CSS“位置:固定":移动缩放 [英] CSS "position:fixed": mobile zoom

问题描述

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

I'm trying to solve an issue with css "position:fixed" property on mobile browsers. I have a 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从窗口中消失了).

So, usually the behaviour is exactly the desired one, with the div position always on the bottom right of the window, indipendently of the scroll position. My issue is that on mobile browsers, when the users zoom the page, after a certain zoom level the div position is wrong (sometimes the div disappear out of the window).

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

I know that fixed position is not well supported on mobile browsers, but I wonder if there is some workaround. I tried with this js code onScroll event:

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

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

Unfortunately, the code seems to return the wrong position.

有人有小费吗?

推荐答案

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

Ok, that's how I solved the issue...I hope that could help anyone to simulate fixed position on iOS devices.

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

这篇关于CSS“位置:固定":移动缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！