希望在激活iOS键盘时调整浏览器视口的大小 [英] Want to have browser viewport resize when iOS keyboard is activated

问题描述

在iOS网络浏览器（Safari，Chrome等）中，当您单击输入字段并显示键盘时，它将使视口保持相同大小，但会将其部分向上滑出视线。这使创建类似于应用程序的网站非常困难，因为我正在编写聊天应用程序，并且当键盘显示时，我想使对话完全可见，而只是简单地调整对话区域的大小以适合新的调整大小的可视区域。

In iOS web browsers (Safari, Chrome, etc.), when you click into an input field and the keyboard displays, it keeps the viewport the same size but slides it up partially out of view. This makes creating app-like websites very difficult, as I'm coding a chatting app and when the keyboard shows I want to keep the conversation completely in view, but simply resize the conversation area to fit in the new "resized" viewable area.

我已经尝试了所有方法，例如将对话区域绝对定位为 left：0;。正确：0；最高：0; bottom：0 ，但iOS仍将视口保持相同的大小，并将其向上推并部分伸出视线。

I've tried everything, such as having the conversation area be absolutely positioned with left: 0; right: 0; top: 0; bottom: 0, but still iOS keeps the viewport the same size and pushes it up and partially out of view.

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

Is this possible? Or is it system-level functionality that is beyond control of CSS or JavaScript?

推荐答案

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

The simple answer is... The soft keyboard is separate from the browser and cannot be controlled by anything inside the browser itself.

Android& iOS都对软键盘的处理方式有所不同，因此编写在设备上工作的东西将很困难。

Android & iOS both treat the soft keyboard differently so writing something to work across devices is going to be difficult.

iOS Safari 不会改变大小浏览器窗口的实际上，它会将整个应用程序窗口向上推，从而将顶部隐藏在设备屏幕之外。因此，从理论上讲，位置：固定； 页脚应能按预期的方式发挥作用，而将标头推到看不见的位置。 （位置固定比绝对更可取，因为其参考点始终是窗口。）

iOS Safari doesn't change the size of the browser window. It actually pushes the entire application window up hiding the top portion off the device screen. So, in theory a position: fixed; footer should function the way you expect while headers are pushed up out of sight. (Position fixed is preferable over absolute as its reference point is always the WINDOW.)

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

In practice it seems to depend on the version of iOS for how fixed positioning actually works. However, as of iOS version 12 you can use javascript to watch changes to window.innerHeight and add a new class when things change.

Android上的Chrome 似乎在物理上改变了浏览器窗口的高度，因此屏幕尺寸媒体查询可能足以放置内容

Chrome on Android seems to physically change the height of the browser window so screen size media-queries might be enough to position things in this case.

像往常一样，设备/操作系统/屏幕组合太多了，您应该尽可能多地进行测试，并意识到您永远不会解决所有这些问题。

As always, there are so many device/OS/screen combos that you should test as much as possible and be aware that you're probably never going to solve for all of them.

这篇关于希望在激活iOS键盘时调整浏览器视口的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！