CSS Media查询横向android软键盘

我正在开发一个平板电脑的网络应用程序（用于Android和ios），我正面临一个问题，这个问题已经给我带来了2天的麻烦。

问题是，当您处于纵向模式时，在Android上，例如您聚焦输入字段，以便软键盘弹出css媒体查询方向更改为横向。 我已经读过这个问题： CSS媒体查询 – 软键盘打破了css定位规则 – 替代解决方案？ 并想出了这个：

var is_keyboard = false; var is_landscape = false; var initial_screen_size = window.innerHeight; window.addEventListener("resize", function() { is_keyboard = (window.innerHeight < initial_screen_size); is_landscape = (screen.height < screen.width); updateViews(); }, false); function updateViews() { if(!is_landscape) { if(is_keyboard) { $("html").removeClass("landscape portrait"); $("html").addClass("portrait"); } } } 

然而，由于某种原因，这不起作用。 无论如何都要将方向更改为纵向模式，以便css媒体查询认为我们处于纵向模式？ 我不喜欢使用max-width等因为我需要支持多种屏幕尺寸。

提前致谢。

Answer 1

经过一番搜索，我想出了这个：

 @media screen and (min-aspect-ratio: 13/9){ } // landscape @media screen and (max-aspect-ratio: 13/9){ } // portrait 

代替

 @media (orientation : landscape){ } @media (orientation : portrait){ } 

因此，如果你和我在同一条船上，我会建议你顺其自然，所以你不必担心头痛。

Answer 2

有这篇好文章来解决这个问题。

但有时13/9还不够。 @media screen和（min-aspect-ratio：14/9）{} // landscape

很可惜，如果你把它增加到16/9，iphone5就无法识别风景。