Javascript 在Zoom Mobile Safari上修改div位置

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

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

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

请参阅链接以获取源代码

如能就此事提供任何指导，将不胜感激。谢谢

更新：这里有一个指向示例应用程序的链接。您可以找到我当前的所有处理程序和功能。我主要关心的是在缩放后将“palmGuard”元素重置到相对于屏幕的相同位置。如果你有任何问题，请告诉我

链接：

---

此示例仅适用于mobile safari

好的，我相信这正是您想要的

您需要根据iOS屏幕的比例计算div的位置，而不是使用缩放因子。您需要全程跟踪这一点。无论何时移动（未缩放）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）。这将为您提供所需屏幕上的新位置（与上次不同）

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

另外，我认为你的缩放“带状”逻辑过于简单，也就是说，如果这是为了处理当缩放反弹到它的范围内？我认为它没有考虑到不同的iOS屏幕大小

除了影响内部高度的“条带”外，它似乎还影响posYOffset的值，这是很有意义的。这将导致div位于页面下方。解决这个问题的一种可能的方法是检测缩放是否过远（如您所指的带状），并使用轮询函数检测内部高度是否降回到最小值，然后获取posYOffset。如果在分组后存在事件，则显然不需要轮询

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

类似地，在gestureEnd事件之后，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);

---

老实说，我还没有开发过移动应用/网站。因此，如果它们与用于网站的传统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/元素的CSS属性必须是绝对的（如果尚未设置）。沿x轴居中也可以这样做（用宽度代替高度）

或

---

您可以为div/元素的位置使用百分比值（我认为这更有效）。下面的文章将在这方面为您提供帮助—（查看测试用例）

如果这不起作用，如果您提供了指向完整编码示例（托管或只是tar/zip文件）的链接，我不介意看一看。我已经尝试使用宽度来确定窗口的比例，（我以前用与touchMove相同的方法计算touchend zoomNew变量）。此外，我认为这不是问题所在，因为我收到的高度值是预期值。（另外，我一直在运行无导航栏的应用程序）我将尝试用我当前的代码创建一个小的演示应用程序，并更新这个问题。我现在只是尝试一下，但我认为你的逻辑在使用缩放比计算顶部方面是错误的（我不认为它是线性的），我认为你需要计算屏幕本身的位置（使用内部高度和页面偏移），然后计算页面上当前内部高度所需的位置。我会尝试一下。目前，带状黑客只考虑横向位置。我很感激你的回答，但这个问题是针对mobile safari的收缩缩放。iPad的视口模型与传统浏览器完全不同。另外，我不尝试将元素居中，但保留其位置（因为它可以被用户移动）添加了更多信息。检查它们是否有帮助我不确定这是否有帮助，您是否尝试读取缩放CSS属性？：）我不会这么说，在任何webkit浏览器中尝试$（“body”）.CSS（“zoom”，2），您将看到它是如何工作的。我的观点是，您读取它的值并尝试计算什么是缩放比率，1是正常的（100%），因此您可以轻松地计算出div的剩余空间！

/* ---- 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);