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

Question

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

键盘出现时纵向模式被误解为横向

这就是问题所在。在我的 Web 应用程序的所有页面中，都有一个由文本框和一个按钮组成的搜索控件。当我处于纵向模式并单击文本字段时，键盘显示并且视口大小更改为height < width，这导致我的应用程序在设备处于纵向时变为横向。当用户离开该领域的焦点时，键盘消失，肖像模式正确恢复回来。

看一下这里的图片：当用户搜索某些东西时，横向模式被激活。为什么？很简单：因为键盘显示导致视口发生变化，最终视口的高度低于宽度。

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

涉及的所有设备

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

• 安卓
• 苹果 iOS
• 窗户

设备。

你知道如何解决这个问题吗？针对这样的场景可以采取哪些类型的方法？

Answer 1

来自https://web.archive.org/web/20160509220835/http://blog.abouthalf.com/development/orientation-media-query-challenges-in-android-browsers/的摘录

要解决键盘抽搐的问题，我们需要更换blunt 包罗万象的术语，例如“肖像”，其纵横比可以捕捉我们的 奇怪的键盘边缘案例。

从上面，我们知道 Droid Razr 的屏幕尺寸，在 显示键盘的纵向方向为 360 像素 x 253 像素。 将 360 除以 253 得到 1.4（四舍五入到最接近的十分之一）。 虽然我们可以只写一个纵横比媒体查询，比如 最小纵横比：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

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