dalv_happy
@dalv_happy

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

Добрый день!

CSS
Интересную вещь обнаружил, если именно на андройде открыть клавиатуру в вертикальной ориентации, то срабатывает медиа запрос, но то что сейчас горизонтальная ориентация, я так понимаю что клавиатура вытесняет контент, на айфоне такого не наблюдается, видимо клава накладывается поверх контента.
@media all and (orientation:landscape) {
    .block {
      background: green;
    }
  }

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

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

И как определять корректно ориентацию на мобилках с открытой клавой?
  • Вопрос задан
  • 147 просмотров
Решения вопроса 1
dalv_happy
@dalv_happy Автор вопроса
В общем временное решение придумал через 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%;
  }
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы