我正在尝试使用平板电脑设备(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);
