使用JavaScript获取平板电脑设备上的网页中心坐标

Question

我正在尝试计算网页上的视口几何中心,使用平板电脑设备(iOS和Android)渲染,即根据当前平移和当前缩放级别的视口的实际中心(所见) - 不希望文档本身的中心,我想要屏幕的中心,我正在查看.

问题是这个计算没有考虑任何类型的缩放(当时)翻译.

在iOS上,我尝试了一些这些答案,在检测到缩放iOS的问题上,我能够捕获事件"OnZoom",但没有得到任何价值.

在Android上,我甚至无法捕捉任何与缩放相关的事件.我知道touchmove和touchstart事件,但我怎么能区分然后才能获得缩放(和缩放值)

我正在使用jQuery 1.7.2库.

Answer 1

我做了一个演示页面，已确认可以在 iPhone iPad、三星 Galaxy Tab 10 上使用。我只在一个巨大的 div 上附加了点击事件，因此在缩放后点击屏幕来更新显示。

计算很简单，用来screen.width/window.innerWidth获取缩放级别。screen.width将始终以设备像素为单位并且window.innerWidth is always in css pixels, which also take the zoom into account.

进一步的计算是简单的数学：

// round the result down to avoid "half pixels" for odd zoom levels
Math.floor(window.scrollY + window.innerHeight/2);
Math.floor(window.scrollX + window.innerWidth/2);

要检查用户是否正在缩放，请将侦听器附加到window.resize和 ，window.scroll该侦听器将orientationchange在隐藏地址栏并缩放后触发。

这是我的演示 JavaScript：

var dot = document.getElementById("dot");
document.getElementById("main").addEventListener("click", function(e) {
    var zoom = screen.width / window.innerWidth;
    alert("zoom: " + zoom + "\n" + "ScrollY: " + window.scrollY);

    dot.style.top = Math.floor(window.scrollY + window.innerHeight/2 - 5) + "px";
    dot.style.left = Math.floor(window.scrollX + window.innerWidth/2 - 5) + "px";

}, false);