Android   发布时间:2022-04-28  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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在平板电脑上获取网页中心坐标全部内容,希望文章能够帮你解决android – 使用JavaScript在平板电脑上获取网页中心坐标所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。