Улучшение удобства работы с мобильными сайтами: усиление альбомной ориентации и отключение автоповорота

При разработке дизайна для мобильных устройств определенные ориентации могут существенно повлиять на пользователя опыт. Этот вопрос ищет решение, позволяющее ограничить мобильный веб-сайт альбомной ориентацией и отключить автоматическое вращение.

CSS-решение

Один из способов добиться этого — использовать медиа-запросы CSS. Создав отдельные таблицы стилей для альбомной и книжной ориентации, вы можете контролировать поведение сайта в зависимости от ориентации устройства. Вот как это реализовать:

1. Создайте две таблицы стилей: style_l.css для альбомной ориентации и style_p.css для книжной ориентации.
2. В style_l.css включите стили для ландшафтной ориентации, которые будут отображаться содержимое сайта во всю ширину.
3. В style_p.css скройте все элементы и отобразите сообщение, предлагающее пользователям наклонить свое устройство для оптимального просмотра.
4. Добавьте следующий код в раздел заголовка HTML. для использования медиа-запросов:

Решение jQuery

jQuery также можно использовать для определения ориентации устройства и соответствующего изменения функциональности сайта. Вот пример:

$(window).on("orientationchange", function() {
  if (window.orientation == 0 || window.orientation == 180) {
    // Landscape orientation
    // Enable landscape-specific features here
  } else if (window.orientation == 90 || window.orientation == -90) {
    // Portrait orientation
    // Show a message to rotate device
  }
});

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