Я работаю с несколькими планшетными устройствами - как Android , так и iOS . В настоящее время у меня есть следующие варианты разрешения для всех планшетов.

• 1280 x 800
• 1280 x 768
• 1024 x 768 (очевидно, iPad) - iPad не имеет этой проблемы

Самый простой способ применить стиль на основе ориентации устройства - использовать ориентацию медиа-запроса с помощью следующий синтаксис.

@media all and (orientation:portrait)
{
  /* My portrait based CSS here */
}

@media all and (orientation:landscape)
{
  /* My landscape based CSS here */
}

Это отлично работает на всех планшетных устройствах. НО , проблема в том, что когда устройство находится в портретном режиме и пользователь нажимает на любое поле ввода (например, поиск), появляется экранная клавиатура, которая уменьшает видимую область веб-страницы и заставляет ее отображать в ландшафтном CSS. На планшетах Android это зависит от высоты клавиатуры. Итак, в конечном итоге веб-страница выглядит сломанной. Поэтому я не могу использовать медиа-запрос ориентации CSS3 для применения стилей на основе ориентации (если нет лучшего медиа-запроса для целевой ориентации). Вот скрипка http://jsfiddle.net/hossain/S5nYP/5/ , которая эмулирует это - для тестирования устройства используйте полную тестовую страницу - http://jsfiddle.net/S5nYP/embedded / result /

Вот скриншот поведения, взятого с демонстрационной страницы.

Итак, есть ли альтернатива решению этой проблемы, я открыт для решения на основе JavaScript, если собственное решение на основе CSS не работает.

Я нашел фрагмент на http://davidbcalhoun.com/2010/dealing-with-device-orientation , в котором предлагается добавить класс и настроить таргетинг на основе этого. Например:

  
    
Element Heading - Landscape
    
Element Heading - Portrait