Question

我正在开发平板电脑的网络应用程序（用于Android和ios），我遇到了一个问题给我两天的麻烦了。

问题在于，当您处于纵向模式时，在Android上，例如您聚焦输入字段，以便软键盘弹出css媒体查询方向更改为横向。我已经阅读了这个问题：CSS Media Query - Soft-keyboard breaks css orientation rules - alternative solution?并提出了这个问题：

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

有这个好article来解决这个问题。

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

如果你把它增加到16/9，那么iphone5就不会认识到这种情况。

Answer 3

与最小值和最大值“ -aspect-ratio”分开的是最小值和最大值“ -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等人说过该参数已被弃用，但他们没有说明该参数已被弃用的内容。我在假设不赞成使用该参数的情况下进行操作，该参数并非在所有设备（例如台式机浏览器）上均受支持，但通常在具有方向的设备上可用。

以上代码段是在假设用户位于桌面上的情况下运行的，然后根据“设备长宽比”和一般纵横比对其进行校正。 Havent有机会在基于肖像的台式设备上验证了我的理论，但这似乎适用于我拥有的所有移动设备。

CSS Media查询横向android软键盘

3 个答案: