Question

我在iPhone上的Safari中查看如何在页面上跟踪用户缩放和平移的选项。 Safari暴露了移动和手势事件，所以理论上我可以保持平移和缩放操作的运行记录，但这看起来有点过分，因为浏览器必须在内部跟踪。

是否通过文档对象模型公开了这些信息？

Answer 1

放大时，window.innerWidth已调整，但document.documentElement.clientWidth不是，因此：

var zoom = document.documentElement.clientWidth / window.innerWidth;

（我测试了iOS4，没有viewport <meta>）。

然而，我不会依赖它来做任何重要事情。移动浏览器中的DOM视口大小/像素大小are a complete mess。

Answer 2

根据Safari Web Content Guide，缩放事件（双击）未公开，因此我不确定如何跟踪此事。

我不相信这些信息是通过DOM公开的。

Answer 3

在Mobile Safari和Android上，这是衡量页面缩放程度的准确方法。

在此处尝试：http://jsbin.com/cobucu/3 - 更改缩放，然后点击小节。

技术是添加顶级div：

<body>
<div id=measurer style="position:absolute;width:100%"></div>

并使用计算：

function getZoom(){
    return document.getElementById('measurer').offsetWidth / window.innerWidth;
}

唯一的问题是找到一种整洁的方法来检测用户是否已经改变了缩放（捏合，双击等）。选项：

webkitRequestAnimationFrame：非常可靠，但如果使用动画可能会导致混乱（由于性能受到影响）
setInterval：可靠但非常丑陋
触摸事件：寻找两个手指或双击：丑陋，可能难以100％可靠
window.onresize + window.onorientationchange + window.onscroll：简单但完全不可靠（编辑：和onscroll会导致WKWebView或Mobile Safari 8或更高版本的性能问题。）

PS：Windows Phone需要一个不同的解决方案（捏缩放不会改变视口 - 在Windows上的捏拉缩放有自己的单独的视口，这对javascript是不可见的。）< / p>

编辑：Android Visual Viewport调整大小和滚动事件可能有帮助吗？见https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport#Events

Answer 4

我实际上认为自Steve回答以来可能会有所改变，因为看看他提供的内容指南链接我可以在Handling Multi-Touch Events和Handling Gesture Events看到一个部分。

尚未尝试过，但看起来很有前途。一旦我检查出来并提供了一个演示链接，我会提供更新...

Answer 5

我以这种方式测量缩放（仅适用于iOS）：

screenOrientedWidth = screen.width;
if (window.orientation == 90) {
    screenOrientedWidth = screen.height;
}
return screenOrientedWidth / window.innerWidth;

它不取决于内容的广泛程度。

但是，在iOS window.innerWidth处理程序中，Safari gestureend内部不正确。您应该推迟这样的计算以便以后执行。在GWT中，我使用scheduleDeferred，但我不能说如何在纯JavaScript中实现它。

Answer 6

如果您使用任何具有location：fixed的元素，这会变得很复杂，因为location：fixed坐标是相对于未缩放的窗口的，而窗口坐标是相对于缩放的视口的。更多信息：How to position a fixed-location element on IOS browser when zoomed?

Safari iPhone - 如何检测缩放级别和偏移？

6 个答案: