10

我正在为平板电脑（适用于 android 和 ios）开发一个 Web 应用程序，但我遇到了一个问题，这个问题已经给我带来了 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 等，因为我需要支持多种屏幕尺寸。

提前致谢。

4

3 回答 3

21

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

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

代替

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

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

于 2013-06-04T09:32:45.037 回答
1

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

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

注意，如果你把它提高到 16/9，iphone5 就认不出风景了。

于 2015-03-20T14:52:41.853 回答
0

与 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 等人说该参数已被弃用，但他们没有留下关于它已被弃用的说明。我的操作是假设不推荐使用该参数并非所有设备（如桌面浏览器）都支持该参数，但通常在具有方向的设备上可用。

上面的片段在假设用户在桌面上的情况下运行，然后根据“设备纵横比”和一般纵横比进行校正。Havent 有机会在基于纵向的桌面设备上测试我的理论，但这似乎适用于我拥有的所有移动设备。

于 2020-05-12T01:23:04.383 回答