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

我试图计算网页上使用平板设备（iOS和Android）呈现的视口几何中心，即实际视口的中心（您所看到的）根据目前的翻译和当前缩放级别 - 不希望文档中心本身，我想要屏幕的中心，我正在查看。使用JavaScript获取平板设备上的网页中心坐标

问题是，这种计算是不考虑任何种类的缩放（然后）翻译。

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

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

我使用jQuery 1.7.2库。

来源

2012-07-13 jose

你的问题是混乱的。你的意思是什么“视口几何中心”.. PLZ解释。 – Neji 2012-07-17 08:39:38

这可能听起来有点奇怪，但是你尝试了一个隐藏的，绝对定位的div，拉伸填充（left：0; right：0; top：0; bottom：0;），并在该div内部生成一个居中的单像素图像，然后使用.position（）获取图像的坐标;？ – 2012-07-17 09:03:16

这张图像不会像整个文档一样大吗？如果它将拉伸中心不会根据视口中心，我认为... – jose 2012-07-17 09:09:28

我已经做了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.scrollorientationchange隐藏地址栏和缩放之后会火。

这里是我的演示的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-18 23:41:11

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

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

尚未在Android设备上尝试过。

我不认为这适用于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-18 03:24:31 ahren

我页面缩放检测方法在JavaScript中一对夫妇几年前有一个客户请求。

就我而言，他希望它能够在Facebook应用上工作。通过iframe画布/视口。

我用最大和最小功能

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

来源

2012-07-24 02:24:36

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

回答

相关问题