想要在激活iOS键盘时调整浏览器视口大小

Gav*_*vin 6 javascript css safari ios

在iOS网络浏览器(Safari,Chrome等)中,当您单击输入字段并显示键盘时,它会使视口保持相同的大小,但会将其部分滑出视图.这使得创建类似app的网站变得非常困难,因为我正在编写一个聊天应用程序,当键盘显示我希望完全保持对话时,只需调整对话区域的大小以适应新的"已调整大小"的可视区域.

我已经尝试了所有的东西,例如让对话区域绝对定位left: 0; right: 0; top: 0; bottom: 0,但iOS仍然保持视口大小相同并将其推向局部视线之外.

这可能吗?或者是系统级功能是否超出了CSS或JavaScript的控制范围?

Bry*_*son 5

简单的答案是......软键盘与浏览器是分开的,不能被浏览器本身内部的任何东西控制。

Android 和 iOS 都以不同的方式对待软键盘,因此编写跨设备工作的东西会很困难。

iOS Safari不会更改浏览器窗口的大小。它实际上将整个应用程序窗口向上推,将顶部部分隐藏在设备屏幕之外。因此,从理论上讲,position: fixed;当页眉被推到视线之外时,页脚应该按照您期望的方式运行。(Positionfixedabsolute它的参考点总是 WINDOW更可取。)

在实践中,它似乎取决于 iOS 的版本来确定固定定位的实际工作方式。但是,从 iOS 版本 12 开始,您可以使用 javascript 来观察更改window.innerHeight并在情况发生变化时添加新类。

Android 上的 Chrome似乎在物理上改变了浏览器窗口的高度,因此media-queries在这种情况下,屏幕大小可能足以定位东西。

与往常一样,有如此多的设备/操作系统/屏幕组合,您应该尽可能多地进行测试,并注意您可能永远无法解决所有这些问题。