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

Question

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

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

问题来了。在我的网络应用程序的所有页面中，都有一个由文本框和按钮组成的搜索控件。当我处于纵向模式并单击文本字段时，键盘显示并且视口(viewport)大小发生变化 height < width这会导致我的应用程序在设备处于纵向时变为横向。当用户离开焦点时，键盘消失，纵向模式正确恢复。

看看上面的图片:当用户搜索内容时，横向模式被激活。为什么？很简单:因为视口(viewport)因键盘显示而改变，最终视口(viewport)的高度小于宽度。

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

涉及的所有设备

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

• 安卓系统
• 苹果 iOS
• window

设备。

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

Answer 1

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

To solve the twitchy keyboard problem, we need to replace blunt catch-all terms like ‘portrait’ with an aspect ratio that captures our weird keyboard edge case.

From above, we know that the screen dimensions of the Droid Razr, in portrait orientation, with the keyboard displayed, are 360px by 253px. Divide 360 by 253 and you get 1.4 (rounded to the nearest tenth). While we could just write an aspect ratio media query like min-aspect-ratio: 360/253, that’s a little too specific to one device. So instead we’ll use 13 to 9. That also equals roughly 1.4 but it’s easier on the eyes.

For landscape media:

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

And for portrait media:

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