CSS Media查询横向android软键盘

Question

我正在开发一个平板电脑的网络应用程序(用于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){ }

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