Question

要修复自动缩放问题以在iOS设备上呈现我的网页，我已添加了视口元标记，

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

我通过iPhone和iPad的媒体查询添加了设备特定的样式，这解决了纵向/横向方向切换时的缩放问题。现在的问题是当我将焦点移动到输入区域（使键盘向上）并在键盘打开时切换到横向（自动缩放发生正常）以及当我将方向切换回纵向模式时（键盘仍然打开），UI变形，即，一些额外的长度被添加到视口宽度，该视口宽度显示为黑色区域或同一视口的一部分再次重复。如果我再次关闭键盘并切换方向，则会删除添加的空间并再次恢复正常的UI。仅在键盘打开时才会发生这种情况。我使用移动safari作为我的浏览器。

Answer 1

我多年来一直在使用Mobile Safari，而且我已经学到了一件事 - 当输入有焦点时，当涉及到方向更改时，它是如此的错误。

说，这是一个可以帮助你的小脚本。

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

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

轻松复制错误：http://fiddle.jshell.net/LYn54/show/

解决问题：http://fiddle.jshell.net/gQR4m/show/

希望这有帮助！

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

1 个答案: