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

Question

有没有人知道如何在用户捏合或双击以在 JavaScript 中放大/缩小页面后获取视口的大小（以像素为单位）或缩放值？

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

如果我用小捏捏来放大和缩小，window.innerWidth 似乎工作得很好。不幸的是，我不能依赖用户只做小的捏手势:)

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

最终，我正在尝试制作一个应用程序，当用户尝试缩小超出最大缩放级别时，我会知道它，所以如果有其他方法可以做到这一点，我有兴趣了解它 :)

这是我用来获取 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。