android - 使用 JavaScript 在平板设备上获取网页中心坐标

Question

我正在尝试计算使用平板设备(iOS 和 Android)呈现的网页上的视口(viewport)几何中心，即视口(viewport)的实际中心(您所看到的) 根据当前的翻译 和当前的缩放级别 - 不想要文档本身的中心，我想要我正在查看的屏幕中心。

问题是这个计算没有考虑任何类型的缩放(然后)翻译。

在 iOS 上，我尝试了其中一些关于问题 detecting pinch to zoom on iOS 的答案。 ,我能够捕捉到事件“OnZoom”，但没有获得任何值(value)。

在 Android 上，我什至无法捕获任何与缩放相关的事件。我知道 touchmove 和 touchstart 事件，但我如何区分才能获得缩放(和缩放值)

我正在使用 jQuery 1.7.2 库。

Answer 1

我做了一个demo page已确认可在 iPhone iPad、Samsung Galaxy Tab 10 上运行。我只在一个巨大的 div 上附加了点击事件，因此在缩放后点击屏幕以更新显示。

计算很简单，使用screen.width/window.innerWidth得到缩放级别。 screen.width 将始终以设备像素为单位，而 window.innerWidth 将始终以 css 像素为单位，这也考虑了缩放。

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

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