在 iOS 上使用键盘更改方向时的缩放问题答案

【问题标题】：Scaling issue on orientation change with keyboard on for a web page on iOS在 iOS 上使用键盘更改方向时的缩放问题
【发布时间】：2014-05-13 14:00:09
【问题描述】：

为了解决自动缩放问题以在 iOS 设备上呈现我的网页，我添加了 viewport 元标记，

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-  scale=1,user-scalable=no">

我已经通过 iPhone 和 iPad 的媒体查询添加了特定于设备的样式，这解决了在纵向/横向方向之间切换时的缩放问题。现在的问题是，当我将焦点转移到输入字段（提起键盘）并在键盘打开的情况下转移到横向（自动缩放发生正常）以及当我将方向切换回纵向模式时（键盘仍然打开），UI 会被扭曲，即，一些额外的长度会添加到视口宽度，这些长度要么显示为黑色区域，要么是同一视口的一部分再次重复。如果我再次按下键盘并切换方向，添加的空间会被移除，UI 会再次恢复正常。这只发生在键盘打开的情况下。我正在使用移动 Safari 作为我的浏览器。

【问题讨论】：

标签： ios iphone ipad mobile-safari viewport

【解决方案1】：

我已经使用 Mobile Safari 多年了，我学到了一件事——当输入有焦点时，它的方向变化非常糟糕。

这么说，这里有一个小脚本可以帮到你。

window.addEventListener('orientationchange', function(){
    document.body.style.paddingRight = '1px';
    setTimeout(function(){
        document.body.style.paddingRight = '';
    }, 50);
}, true);

这基本上会强制浏览器重排/重新计算布局，这有望解决您所看到的情况。

解决一个易于重现的错误：https://jsfiddle.net/LYn54

解决问题：https://jsfiddle.net/gQR4m

希望这会有所帮助！

【讨论】：