Question

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

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

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

查看来源链接。

对此问题的任何指导将不胜感激。感谢。

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

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

此示例仅适用于移动版Safari

Answer 1

好的，我相信这可以做你想要的。

您需要按比例计算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的值似乎在之后改变了，因此即使没有出现条带，你也需要一些机制来获取pageYOffset和innerHeight的已结算值。您可以通过将以下内容添加到gestureEnd来测试此效果：

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

Answer 2

我会诚实地告诉你，我还没有开发过移动应用程序/网站。因此，如果它们与用于网站的传统jquery不同，我可能在所有语法上都是正确的。但是你可以尝试下面的算法（它基本上将div放在页面的中心位置）。因为我熟悉它，所以我使用了传统的jquery。

/* ---- Excute the below lines on $(window).resize(function(){}); or a function that is triggered on zoom [which ever is correct] ---- */

var modalH = parseInt($('[THE DIV/ELEMENT THAT YOU WANT TO CENTER]').css('height'));
var windowH = $(window).height();
var modalPosY = (windowH - modalH) / 2;
$('[THE DIV/ELEMENT THAT YOU WANT TO CENTER]').css('Top', modalPosY);

并且当然，div / element的CSS属性必须是绝对的[如果它尚未设置]。同样可以沿x轴居中（用宽度代替高度）

或

您可以使用div /元素位置的百分比值（我认为这更好）。以下文章将为您提供帮助 - http://novemberborn.net/2007/12/javascriptpage-zoom-ff3-128。（查看测试用例）

在Zoom Mobile Safari上修改div位置

2 个答案: