Question

我正在尝试计算网页上的视口几何中心，使用平板电脑设备（iOS和Android）进行渲染，即 视口的实际中心（您看到的内容）< / strong>根据当前翻译和当前缩放级别 - 不希望文档中心本身，我希望屏幕中心显示我正在查看的内容。

问题是此计算没有考虑任何类型的缩放（当时）翻译。

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

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

我正在使用jQuery 1.7.2库。

Answer 1

我已经确认可以在iPhone iPad，三星Galaxy Tab 10上使用demo page。我只在巨大的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);

Answer 2

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

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

尚未在Android设备上试过。

我认为这不适用于iOS＆lt; = 4，因为它们不支持固定定位。

<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>

Answer 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状态的检查，并与视口对象中的存储值进行比较。

我非常确定通过iframe附加或添加事件监听器不是一个选项。

我仍然在一个被忽视的网站上有演示代码，我有点管理..哈哈http://focalpointproperties.net/vWorker/proj_zoomcontrol.php

使用JavaScript获取平板电脑设备上的网页中心坐标

3 个答案: