Почему не работает определение ориентации на css и js?

Question

[Username]

Добрый день!

CSS
Интересную вещь обнаружил, если именно на андройде открыть клавиатуру в вертикальной ориентации, то срабатывает медиа запрос, но то что сейчас горизонтальная ориентация, я так понимаю что клавиатура вытесняет контент, на айфоне такого не наблюдается, видимо клава накладывается поверх контента.

@media all and (orientation:landscape) {
    .block {
      background: green;
    }
  }

Чекнуть https://jsfiddle.net/qf9ebwgx/2/

JS
Если юзать window.screen.orientation, то он отрабатывает только на пк на мобилках нет.
Если юзать либу screen-orientation то она не работает на мобилках.

И как определять корректно ориентацию на мобилках с открытой клавой?

Answer 1

[Username]

В общем временное решение придумал через aspect-ratio
Теперь если открывается клавиатура в вертикальной ориентации телефона, css не думает что сейчас горизотальная ориентация

@media screen and (min-aspect-ratio: 13/9) and (min-aspect-ratio: 16/9) {
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
    border-radius: 15px;
    position: absolute;
    height: 640px;
    width: 360px;
    top: 30px;
    transform: translate(-50%, 0);
    left: 50%;
  }