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

Question

当我以纵向模式启动我的应用程序时，它可以正常工作。然后我旋转到风景中，并按比例放大。为了使其能够在横向模式下正确缩放，我必须双击某物两次，首先将其一直放大（正常的双击行为），然后再次将其一直缩小（再次是正常的双击行为）。 。缩小时，它会缩小到横向模式的正确新比例。切换回纵向似乎更一致。也就是说，它可以处理缩放，以便在方向变回纵向时缩放比例正确。我想弄清楚这是否是错误？还是这可以用JavaScript修复？使用视口元内容，我将初始比例设置为1.0，而不是设置最小或最大比例（我也不想要）。我将宽度设置为设备宽度。有任何想法吗？我知道很多人将不胜感激，因为它似乎是一个长期存在的问题，因此将有一个解决方案。

Answer 1

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

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

然后，在加载时禁用javascript的可伸缩性，直到您使用此脚本再次允许可伸缩性时，开始手势启动：

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);

    }

}

在iPad 1上无法使用，在事件监听器上失败。我发现删除.body修复程序：

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

Answer 2

我遇到了同样的问题，并且将maximum-scale设置为1.0对我来说很有效。

编辑：如评论中所述，这会禁用用户缩放，除非内容超出宽度分辨率。如上所述，这可能不明智。在某些情况下也可能需要这样做。

视口代码：

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;">