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

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/的 Excert

为了解决键盘抖动的问题，我们需要用能够捕捉我们奇怪的键盘边缘情况的纵横比替换像“纵向”这样的生硬的笼统术语。

从上面，我们知道 Droid Razr 的屏幕尺寸，纵向显示，显示键盘，为 360 像素 x 253 像素。 将 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

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