javascript - 如何在 iPhone 上的方向更改时重置 Web 应用程序的比例/缩放？

Question

当我以纵向模式启动我的应用程序时，它工作正常。然后我旋转成风景，它被放大了。为了让它在横向模式下正确缩放，我必须双击某物两次，首先一直放大(正常的双击行为)，然后再次缩小(再次，正常的双击行为) .缩小时，它会缩小到适合横向模式的正确新比例。

切换回纵向似乎更稳定；也就是说，它会处理缩放，以便在方向变回纵向时比例是正确的。

我想弄清楚这是否是一个错误？或者这是否可以用 JavaScript 修复？

对于视口(viewport)元内容，我将初始比例设置为 1.0，并且我没有设置最小或最大比例(我也不想)。我将宽度设置为设备宽度。

有什么想法吗？我知道很多人会很高兴有一个解决方案，因为它似乎是一个长期存在的问题。

Answer 1

Jeremy Keith ( @adactio ) 在他的博客 Orientation and scale 上有一个很好的解决方案

通过不设置标记的最大比例来保持标记的可缩放性。

<meta name="viewport" content="width=device-width, initial-scale=1">

然后在加载时使用 javascript 禁用可伸缩性，直到 gesturestart 当您再次使用此脚本允许可伸缩性时:

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}

---

2014 年 12 月 22 日更新:
在 iPad 1 上这不起作用，它在事件监听器上失败。我发现删除 .body 可以解决以下问题:

document.addEventListener('gesturestart', function() { /* */ });