当键盘打开时，纵向模式被误解为横向

Question

我正在开发面向平板电脑和手机的网络应用程序。系统设计为可用，因此必须同时支持横向模式和纵向模式。因此，当用户更改方向时，我的Web应用程序将触发一些事件以相应地重新排列页面。

当键盘出现

时，纵向模式被误解为横向

这是问题所在。在我的Web应用程序的所有页面中，都有一个包含文本框和按钮的搜索控件。当我处于纵向模式并单击文本字段时，键盘显示并且视口大小更改为height < width，这会导致我的应用程序在设备处于纵向状态时移动。当用户从场中离开焦点时，键盘将消失，并且纵向模式可以正确恢复。

在这里查看图片：当用户搜索某些内容时，将激活横向模式。为什么？简单：由于键盘显示而视口已更改，并且最终视口的高度低于宽度。

如果没有打开键盘，我们会Height1 > Width1，但是当键盘打开时，我们有Height2 < Width2但Width2 = Width1。

涉及的所有设备

您可以想象，这是一个涉及所有设备的问题：

• 的Android
• Apple iOS
• Windows

设备。

你知道如何解决这个问题吗？可以采用什么类型的方法来针对这种情况？

Answer 1

https://web.archive.org/web/20160509220835/http://blog.abouthalf.com/development/orientation-media-query-challenges-in-android-browsers/的证书

要解决颤抖的键盘问题，我们需要更换钝器 捕获“纵横比”之类的所有术语，并以高宽比显示 奇怪的键盘保护套。

从上面我们知道Droid Razr的屏幕尺寸 纵向方向（显示键盘）为360px x 253px。 用360除以253，得到1.4（四舍五入到最接近的十分之一）。 虽然我们可以编写长宽比媒体查询，例如 min-aspect-ratio：360/253，这对于一台设备来说太具体了。 因此，我们将使用13到9。这大约等于1.4，但是 眼睛更容易。

对于横向媒体：

@media screen and (min-aspect-ratio: 13/9) { /* landscape styles here */}

对于纵向媒体：

@media screen and (max-aspect-ratio: 13/9) { /* portrait styles here */}

Answer 2

这还取决于您如何获得当前定位，您使用传感器吗？结果可能与物理方向和屏幕比例不同