在 iOS 网络浏览器(Safari、Chrome 等)中,当您点击输入字段并显示键盘时,它会保持视口(viewport)大小不变,但会向上滑动部分不在视野范围内。这使得创建类似应用程序的网站变得非常困难,因为我正在编写一个聊天应用程序,当键盘显示时我想保持对话完全可见,但只需调整对话区域的大小以适应新的“调整大小”的可视区域。
我已经尝试了所有方法,例如让对话区域绝对定位 left: 0;右:0;顶部:0; bottom: 0
,但 iOS 仍然保持视口(viewport)大小相同并将其向上推,部分超出 View 。
这可能吗?还是超出 CSS 或 JavaScript 控制的系统级功能?
最佳答案
简单的答案是……软键盘与浏览器是分开的,不能由浏览器本身内部的任何东西控制。
Android 和 iOS 对软键盘的处理方式不同,因此编写跨设备工作的内容将很困难。
iOS Safari 不会更改浏览器窗口的大小。它实际上将整个应用程序窗口向上推,将顶部隐藏在设备屏幕之外。因此,理论上 position: fixed;
页脚应该按照您期望的方式运行,而页眉被推到看不见的地方。 (位置 fixed
优于 absolute
因为它的 reference point is always the WINDOW 。)
在实践中,固定定位的实际工作方式似乎取决于 iOS 的版本。但是,从 iOS 版本 12 开始,您可以使用 javascript 来观察 window.innerHeight
的变化,并在发生变化时添加一个新类。
Android 上的 Chrome 似乎会物理改变浏览器窗口的高度,因此屏幕尺寸 media-queries
可能足以在这种情况下定位内容。
一如既往,设备/操作系统/屏幕组合如此之多,您应该尽可能多地进行测试,并意识到您可能永远无法解决所有这些问题。
关于javascript - 想要在激活 iOS 键盘时调整浏览器视口(viewport)的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23940438/