ios - 在 iOS 上的网页上使用键盘打开方向更改的缩放问题

Question

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

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

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

Answer 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

希望这对您有所帮助!