在Zoom Mobile Safari上修改div位置

Question

当用户放大时,我很难在相对于整个屏幕保留div的位置.基本上,我想要做的是将div重新定位到正确计算的位置,使得它看起来好像从未移动过用户可能已缩放.这很快变得非常棘手,因为我基本上想要撤消缩放事件所做的任何视觉变化.

例如,如果div的顶部当前位于缩放级别1的屏幕中心(比如1.00的比例),则当用户进入缩放级别2时(通过缩放缩放手势,比如1.235的比例),我想将div的顶部重新定位回屏幕的中心.

目前,我将div的父容器绑定到捕获手势事件的函数.

请参阅源链接.

关于这个问题的任何指导将不胜感激.谢谢.

更新:以下是示例应用程序的链接.您可以找到我当前的所有处理程序和功能.我主要担心的是在缩放后将元素'palmGuard'重置到相对于屏幕的相同位置.如果您有任何疑问,请告诉我.

链接:http://restingrobot.com/test/testScale.html

此示例仅适用于移动野生动物园

Answer 1

好吧，我相信这符合你的要求。

您需要计算 div 相对于 iOS 屏幕的位置比例，而不是使用缩放系数。您需要全程跟踪这一点。每当 div 移动（未缩放）并且开始时，您需要获取此值：

//When div moved and start
var height = window.innerHeight; //Adjust if needed
screenPos = (currentDivTop - window.pageYOffset)/height;

然后，当缩放发生时，您需要将gestureEnd上的div顶部设置为屏幕上页面的顶部点（即window.pageYOffset）加上屏幕上当前像素数（window.innerHeight）乘以iOS上的相对位置我们之前计算的屏幕（screenPos）。这为您提供了所需的屏幕新位置（与上次不同）。

//GestureEnd of zoom
var height = window.innerHeight; //Adjust if needed
var newDivTop = window.pageYOffset + (screenPos*height);

请记住，您需要跟踪该比例值。

另外，我认为您的缩放“条带”逻辑过于简单，也就是说，如果这是为了在缩放弹回其范围内时进行处理？我认为它没有考虑不同的 iOS 屏幕尺寸。

除了影响innerHeight 的“条带”之外，它似乎也会影响posYOffset 的值，这确实很有意义。这将导致 div 被放置在页面的下方。解决这个问题的一种可能的方法是检测缩放何时走得太远（如您所指的条带），并使用轮询函数检测 innerHeight 何时回落到最小值，然后获取 posYOffset。如果在分段后存在事件，则显然不需要轮询。

您也许能够从innerHeight值带计算出正确的屏幕顶部（posYOffset），但我认为这可能取决于缩放时手指在缩放上的位置。

类似地，posYOffset 和innerHeight 的值在gestureEnd 事件之后似乎确实发生了变化，因此即使没有发生条带，您也需要某种机制来获取pageYOffset 和innerHeight 的固定值。您可以通过将以下内容添加到gestureEnd来测试此效果：

//In gestureEnd
alert ('gestureEnd pageY:'+window.pageYOffset+' height:'+height);
setTimeout(function () {
              alert ('later pageY:'+window.pageYOffset+' height:'+window.innerHeight);
                       }, 
           2000);