CSS Media-запрос ландшафтной андроидной мягкой клавиатуры

Я работаю над веб-приложением для планшетов (для android и ios), и я столкнулся с проблемой, которая давая мне проблемы уже 2 дня.

Проблема в том, что на Android-телефоне, когда вы находитесь в портретном режиме, и, например, вы фокусируете поле ввода, чтобы мягкая клавиатура всплывала, ориентация запроса медиа-css меняется на пейзаж. Я уже прочитал этот вопрос: CSS Media Query - Soft-клавиатура нарушает правила ориентации 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 media мы в портретном режиме? Я предпочитаю не использовать 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){ }