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

概述我正在尝试使用平板电脑设备(iOS和 Android)渲染的网页上的视口几何中心,即根据当前的翻译和当前缩放级别的视口的实际CENTER(您看到的内容) – 不想要文档本身的中心,我想屏幕中心我正在查看. 问题是这个计算没有考虑到任何类型的缩放(当时)的翻译. 在iOS上,我尝试了一些这些答案,在问题detecting pinch to zoom on iOS, 我能够抓住事件“OnZoom”,但 我正在尝试使用平板电脑设备(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 levelsMath.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在平板电脑上获取网页中心坐标全部内容，希望文章能够帮你解决android – 使用JavaScript在平板电脑上获取网页中心坐标所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。