<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;
}
});
有人有任何提示吗？
解决方法
没有window.onZoom监听器,但你可以阅读这个帖子：
Catch browser’s “zoom” event in JavaScript
这个答案：https://stackoverflow.com/a/995967/3616853
There’s no way to actively detect if there’s a zoom. I found a good entry here on how you can attempt to implement it. I’ve found two ways of detecting the zoom level. One way to detect zoom level changes relies on the fact that percentage values are not zoomed. A percentage value is relative to the viewport width,and thus unaffected by page zoom. If you insert two elements,one with a position in percentages,and one with the same position in pixels,they’ll move apart when the page is zoomed. Find the ratio between the positions of both elements and you’ve got the zoom level. See test case. 07002 You could also do it using the tools of the above post. The problem is you’re more or less making educated guesses on whether or not the page has zoomed. This will work better in some browsers than other. There’s no way to tell if the page is zoomed if they load your page while zoomed.
