Gav*_*vin 6 javascript css safari ios
在iOS网络浏览器(Safari,Chrome等)中,当您单击输入字段并显示键盘时,它会使视口保持相同的大小,但会将其部分滑出视图.这使得创建类似app的网站变得非常困难,因为我正在编写一个聊天应用程序,当键盘显示我希望完全保持对话时,只需调整对话区域的大小以适应新的"已调整大小"的可视区域.
我已经尝试了所有的东西,例如让对话区域绝对定位left: 0; right: 0; top: 0; bottom: 0,但iOS仍然保持视口大小相同并将其推向局部视线之外.
这可能吗?或者是系统级功能是否超出了CSS或JavaScript的控制范围?
简单的答案是......软键盘与浏览器是分开的,不能被浏览器本身内部的任何东西控制。
Android 和 iOS 都以不同的方式对待软键盘,因此编写跨设备工作的东西会很困难。
iOS Safari不会更改浏览器窗口的大小。它实际上将整个应用程序窗口向上推,将顶部部分隐藏在设备屏幕之外。因此,从理论上讲,position: fixed;当页眉被推到视线之外时,页脚应该按照您期望的方式运行。(Positionfixed比absolute它的参考点总是 WINDOW更可取。)
在实践中,它似乎取决于 iOS 的版本来确定固定定位的实际工作方式。但是,从 iOS 版本 12 开始,您可以使用 javascript 来观察更改window.innerHeight并在情况发生变化时添加新类。
Android 上的 Chrome似乎在物理上改变了浏览器窗口的高度,因此media-queries在这种情况下,屏幕大小可能足以定位东西。
与往常一样,有如此多的设备/操作系统/屏幕组合,您应该尽可能多地进行测试,并注意您可能永远无法解决所有这些问题。