如何在 iPhone Web 应用程序上进行捏合/缩放后获取视口比例？
有谁知道在用户在 JavaScript 中捏合或双击页面放大/缩小后如何获取视口的像素大小或缩放值？
我尝试过使用 window.innerWidth 但结果好坏参半。 有时它似乎准确地给出了视口显示的像素数，但是，如果我在页面上放大，然后用大捏力缩小，window.innerWidth 将在 600-700 左右，尽管它只是显示页面的约 200 像素。 该页面只有 400 像素宽，并且没有显示当您缩小到超出页面大小时看到的“您已经走得太远”的方格背景。
如果我稍微捏一下来放大和缩小，window.innerWidth 似乎工作得很好。 不幸的是，我不能依赖用户只做出小捏手势:)
我还尝试在手势事件对象上使用缩放属性，但我发现这不可靠，因为你并不总是知道初始缩放比例即使使用元标记来指定页面，您也可以重新加载页面或使用后退/前进按钮导航到该页面。
最终，我试图制作一个应用程序，它可以知道用户何时尝试缩小超出最大缩放级别，因此如果有其他方法可以做到这一点，我有兴趣听到它:)
这是我的代码我用来获取innerWidth：
document.body.addEventListener('gestureend', function (evt) {
console.log(window.innerWidth); // inaccurate when doing large pinch gestures
}, false);
谢谢！
Does anyone know how to get the size in pixels or scale value of the viewport after a user has pinched or double tapped to zoom in/out on a page in JavaScript?
I've tried using window.innerWidth but I've had mixed results. Sometimes it seems to accurately give the number of pixels the viewport is showing, however, if I zoom way in on a page and then do a large pinch to zoom back out, window.innerWidth will be around 600-700 even though it is only showing ~200px of the page. The page is only 400px wide and it didn't show the checkered "you've gone too far" background you see when you zoom out beyond the page size.
If I do small pinches to zoom in and out, window.innerWidth appears to work just fine. Unfortunately I can't rely on a user only making small pinch gestures :)
I've also tried to use the scale property on the gesture event object, but I've found that unreliable because you don't always know the initial scale when you reload the page or use back/forward buttons to navigate to it even when using the meta tag to specify it.
Ultimately, I'm trying to make an app that is aware of when a user is trying to zoom out beyond the maximum zoom level so if there is another way to do this I'm interested in hearing about it :)
Here's the code I'm using to get the innerWidth:
document.body.addEventListener('gestureend', function (evt) {
console.log(window.innerWidth); // inaccurate when doing large pinch gestures
}, false);
Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果您只是想限制最大缩放级别，则可以使用特定于 Safari 的视口控制标记：
请参阅特定于 Safari 移动设备的 视口元标记规范了解详细信息。
If you're only trying to limit the maximum zoom level, you can use a Safari-specific viewport control tag:
See the Safari mobile specific viewport meta tag spec for details.