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

Question

用户在JavaScript中对页面进行缩放或双击以放大/缩小后,是否有人知道如何获取视口大小或缩放值？

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

如果我做小缩放放大和缩小,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 移动特定视口元标记规范。