Css-медиа-запрос для обнаружения ландшафта только на мобильном iPhone, Android

Мне нужно добавить сообщение для предотвращения использования пользователями приложения в ландшафтном режиме.

Сообщение, которое является наложением на экране, выглядит примерно так.

<div id="landscape-rotate">
    <h3>Please rotate to portrait view</h3>
    <i class="fa fa-refresh fa-spin fa-3x"></i>
</div>

Я хотел добавить это сообщение, когда iPhone или Android-телефон находится в ландшафтном режиме. Поэтому я добавил следующий медиа-запрос. Это был один из найденных ответов здесь.

@media (max-device-width : 667px) and (orientation : landscape) { 

  #landscape-rotate {
    display: block;
    position:absolute;
  }
}

Единственная проблема заключается в том, что этот мультимедийный запрос, по-видимому, также срабатывает, когда пользователь печатает в режиме книжного режима при приближении клавиатуры. Кто-нибудь нашел медиа-запрос, чтобы избежать этой проблемы, поскольку он делает этот подход непригодным для использования, поэтому мне нужно будет использовать JavaScript.

Ответ 1