CSS Media query landscape android soft keyboard

Question

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.

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");
      }
  }
}

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.

Thanks in advance.

Answer 1

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

instead of

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

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.

Answer 2

There is this good article to solve this problem.

But sometimes 13/9 is not enough. @media screen and (min-aspect-ratio: 14/9){ } // landscape

Becareful, if you increase it to 16/9, iphone5 don't recognize the landscape.