如何在iPhone网络应用程序上捏合/缩放后获得视口比例？

Question

有人知道如何在用户捏合或双击放大/缩小JavaScript页面后获取视口的大小或缩放值吗？

我尝试过使用window.innerWidth，但结果好坏参半。有时它似乎准确地给出了视口显示的像素数，但是，如果我在页面上放大并然后进行大幅缩小以缩小，则window.innerWidth将大约为600-700，即使它只是显示约200px的页面。该页面只有400px宽，并且没有显示当您缩小到超出页面大小时看到的方格“你走得太远”背景。

如果我进行小的缩放以放大和缩小，window.innerWidth似乎工作得很好。不幸的是，我不能仅依靠用户进行小捏手势：）

我也尝试在手势事件对象上使用scale属性，但我发现它不可靠，因为当你重新加载页面或使用后退/前进按钮导航到时，你并不总是知道初始比例即使使用元标记来指定它。

最终，我正在尝试创建一个知道用户何时尝试缩小超出最大缩放级别的应用程序，这样如果有其他方法可以做到这一点，我有兴趣听到它：）< / p>

这是我用来获取innerWidth的代码：

document.body.addEventListener('gestureend', function (evt) {
    console.log(window.innerWidth); // inaccurate when doing large pinch gestures
}, false);

谢谢！

Answer 1

如果您只是尝试限制最大缩放级别，则可以使用特定于Safari的视口控件标记：

<meta name="viewport" content="maximum-scale=2.0">

有关详细信息，请参阅Safari移动设备viewport meta tag spec。