android – 使用JavaScript在平板电脑上获取网页中心坐标

我正在尝试使用平板电脑设备(iOS和Android)渲染的网页上的视口几何中心,即根据当前的翻译和当前缩放级别的视口的实际CENTER(您看到的内容) – 不想要文档本身的中心,我想屏幕中心我正在查看.

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

在iOS上,我尝试了一些这些答案,在问题detecting pinch to zoom on iOS,
我能够抓住事件“OnZoom”,但没有获得任何价值.

在Android上,我甚至不能捕获任何与缩放相关的事件.我知道touchmove和touchstart事件,但如何区分,以获得缩放(和缩放值)

我正在使用jQuery 1.7.2库.

最佳答案
我已经做了一个demo page,被确认在iPhone iPad,三星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,这将在方向更改后触发地址栏和缩放.

这是我的演示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);

转载注明原文:android – 使用JavaScript在平板电脑上获取网页中心坐标 - 代码日志