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

小编典典

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

javascript

当我以纵向模式启动我的应用程序时，它可以正常工作。然后我旋转到风景中，并按比例放大。为了使其能够在横向模式下正确缩放，我必须双击某物两次，首先将其一直放大（正常的双击行为），然后再次将其完全缩小（再次是正常的双击行为）。
。缩小时，它会缩小到横向模式的正确新比例。

切换回人像似乎更一致。也就是说，它会处理缩放，以便在方向变回纵向时缩放比例正确。

我想弄清楚这是否是错误？还是这可以用JavaScript修复？

使用视口元内容，我将初始比例设置为1.0，而不是设置最小或最大比例（我也不想要）。我将宽度设置为设备宽度。

有任何想法吗？我知道很多人将不胜感激，因为这似乎是一个长期存在的问题。

阅读 241

2020-05-01

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

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

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

2020-05-01