10

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

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

在 iOS 上，我尝试了其中一些答案，在检测捏合缩放 iOS 的问题上，我能够捕捉到事件“OnZoom”，但没有得到任何价值。

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

我正在使用 jQuery 1.7.2 库。

4

3 回答 3

2

我制作了一个演示页面，该页面已确认可在 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);
于 2012-07-18T23:41:11.093 回答
1

几年前，我有一个客户请求在 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 的状态，并与视口对象中存储的值进行比较。

于 2012-07-24T02:24:36.480 回答
1

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

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

没有在安卓设备上试过。

我认为这不适用于 iOS <= 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>
于 2012-07-18T03:24:31.980 回答