CSS媒体查询横向安卓软键盘

CSS Media query landscape android soft keyboard

本文关键字：键盘 横向 媒体 查询 CSS      更新时间：2023-09-26

我正在为平板电脑(android和ios)的web应用程序工作，我面临的问题是已经麻烦我两天了。

问题是，在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等，因为我需要支持多种屏幕尺寸。

经过一番搜索，我找到了这个:

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

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

所以如果你和我在同一条船上，我建议你去有了这个，你就不用再头疼了。

有一篇很好的文章可以解决这个问题。

但有时13/9是不够的。@media screen and (min-aspect-ratio: 14/9){}//landscape

小心，如果你把它增加到16/9,iphone5不会识别横向

与min和max "-aspect-ratio"分开的是min和max "-device-aspect-ratio"，它们是设备的参数，而不是屏幕的参数。

@media only screen and (max-device-aspect-ratio:1/1){
    section{background:purple;}
    :root{--devmul:1;}
}
@media only screen and (min-device-aspect-ratio:1/1){
    section{background:orange;}
    :root{--devmul:0.5;}
}

Mozilla等人说该参数已弃用，但他们没有说明是谁弃用了它。我的假设是，该参数不支持所有设备(如桌面浏览器)，但通常在具有方向的设备上可用。

上面的代码片段是在假设用户在桌面上的情况下运行的，然后根据"device-aspect-ratio"和一般宽高比进行校正。我还没有机会在基于纵向的桌面设备上测试我的理论，但这似乎适用于我拥有的所有移动设备。

相关文章：