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

【问题标题】：Get webpage center coordinates on tablet devices using JavaScript使用 JavaScript 在平板设备上获取网页中心坐标
【发布时间】：2012-07-13 04:49:37
【问题描述】：

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

问题是这个计算没有考虑任何类型的缩放（然后）平移。

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

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

我正在使用 jQuery 1.7.2 库。

【问题讨论】：

您的问题令人困惑。 “视口几何中心”是什么意思..请解释一下。
这听起来可能有点奇怪，但是您是否尝试过隐藏的、绝对定位的 div，拉伸以填充 (left:0; right:0; top:0; bottom:0;) 并在里面div 一个居中的单像素图像，然后使用 .position(); 获取图像的坐标？
那张图片不会和整个文档一样大吗？如果它会拉伸中心不会根据视口中心，我认为......
这就是我的意思：jsfiddle.net/c_kick/BCPxR/2。然后，您可以通过添加 css 来隐藏所有这些 .stretched, .center_pixel { visibility: hidden; }（显示：无；会破坏代码，因为那时元素不存在）
对不起，误读了您。当您放大或平移文档时，上述小提琴将不起作用。也许这个会起作用，容器 div 被拉伸到百分比：jsfiddle.net/c_kick/m22MZ

标签： android jquery zooming center

【解决方案1】：

我制作了一个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，这将在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);

【讨论】：

【解决方案2】：

设置一个简单的 HTML 页面，我可以非常接近中心。

使用下面的代码，我只是检查固定 div 的宽度和高度，然后将其与文档偏移量和一些简单的数学运算结合起来找出中心，并在那里放置一个黑点。我可以很接近，但它在我的 iPhone 4S 上有所不同。

尚未在 Android 设备上尝试过。

我认为这不适用于 iOS

<style>
#fixed{
position: fixed;
left: 0; right: 0; top: 0; bottom: 0;
background: orange; opacity: 0.25;
}
.black{
  position: absolute;
  top:0;left:0;
  width: 1px; height: 1px;
  background: black;
}
</style>

<body>
<div id="fixed"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
jQuery(function($){
setInterval(function(){
var top = ($("#fixed").height()/2) + $("#fixed").offset().top;
var left = ($("#fixed").width()/2) + $("#fixed").offset().left;
$("body").append('<div class="black" style="top: '+top+'px; left: '+left+'px;" />');
}, 1500)

});
</script>
</body>

【讨论】：

【解决方案3】：

几年前，我有一个客户请求在 javascript 中使用页面缩放检测方法。

就我而言，他希望它可以在 Facebook 应用程序上运行。通过 iframe 画布/视口。

我使用了 Max 和 Min 函数

function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}
function getDocWidth() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
        Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
        Math.max(D.body.clientWidth, D.documentElement.clientWidth)
    );
}

function getMinHeight(h) {
return Math.min(viewport.currentHeight, getDocHeight(), h);
}

getMinWidth 类似，但我必须对其应用基于浏览器的调整。

我创建了一个名为 viewport 的对象，它存储了一个固定位置 div 的属性，具体来说 currentHeight 和 currentWidth 是 div 元素的 offsetHeight 和 offsetWidth。

我最终初始化了一个 window.intervalTimer 来检查该 div 的状态，并与视口对象中存储的值进行比较。

【讨论】：