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

Question

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

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

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

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

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

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

Answer 1

$(window).resize(function() { 
    if ($(window).width() < 750) { 
    if(screen.availHeight < screen.availWidth){ 
    $('#landscape-rotate').show(); 
    } 
    if(screen.availHeight > screen.availWidth) { 
    $('#landscape-rotate').hide(); 
    } 
} 
});