CSS Media查询横向android软键盘 [英] CSS Media query landscape android soft keyboard

问题描述

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

I'm working on a web application for tablets(for android and ios) and I'm facing a problem which is giving me trouble for 2 days already.

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

The problem is that on android when you are in portrait mode and for example you focus an input field so the soft keyboard pops up the css media query orientation changes to landscape. I already have read this question : CSS Media Query - Soft-keyboard breaks css orientation rules - alternative solution? and came up with this :

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

However this doesn't work for some reason. Is there anyway to change the orientation to portrait mode so the css media query thinks we are in portrait mode ? I prefer not the use max-width etc because I need to support multiple screen sizes.

提前致谢。

推荐答案

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

After some searching I came up with this :

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

而不是

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

所以如果你在和我一样的船，我建议你用这个去买b $ b，这样你就不用担心了。

So if you are in the same boat as me I would advise you to just go with this, so you spare yourself the headache.

这篇关于CSS Media查询横向android软键盘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！