在 iOS 网络浏览器（Safari、Chrome 等）中，当您单击输入字段并显示键盘时，它会保持视口大小相同，但将其部分向上滑动到视图之外。这使得创建类似应用程序的网站非常困难，因为我正在编写一个聊天应用程序，当键盘显示时，我希望将对话完全保留在视图中，而只需调整对话区域的大小以适应新的“调整大小”的可视区域。
我已经尝试了一切，例如让对话区域绝对定位left: 0; right: 0; top: 0; bottom: 0，但 iOS 仍然保持视口相同的大小，并将其向上推并部分移出视图。
这可能吗？或者是 CSS 或 JavaScript 无法控制的系统级功能？
简单的答案是......软键盘与浏览器分离，不能由浏览器本身内部的任何内容控制。
Android 和 iOS 对待软键盘的方式不同，因此编写跨设备工作的东西将会很困难。
iOS 浏览器不会改变浏览器窗口的大小。它实际上将整个应用程序窗口向上推，将顶部部分隐藏在设备屏幕之外。所以，理论上一个position: fixed;页脚应该按照您期望的方式工作，而页眉则被推到看不见的地方。 （位置fixed优于absolute as its 参考点始终是窗口 https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/.)
实际上，固定定位的实际工作原理似乎取决于 iOS 版本。但是，从 iOS 版本 12 开始，您可以使用 javascript 来查看更改window.innerHeight并在情况发生变化时添加一个新类。
Android 上的 Chrome似乎物理上改变了浏览器窗口的高度，因此屏幕尺寸media-queries在这种情况下可能足以定位事物。
与往常一样，有如此多的设备/操作系统/屏幕组合，您应该尽可能多地进行测试，并意识到您可能永远无法解决所有这些组合。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
