Изменить CSS на основе мобильной ориентации

Question

Как лучше всего изменить файл CSS, когда ориентация страницы мобильного приложения меняется с альбомной на книжную и наоборот.Мне нужно поддерживать только Android и iPhone.Кажется, медиа-запросы не самый чистый способ, какие-нибудь другие идеи?

Answer 1

Пример

/* For portrait */
@media screen and (orientation: portrait) {
  #toolbar {
    width: 100%;
  }
}

/* For landscape */

@media screen and (orientation: landscape) {
  #toolbar {
    position: fixed;
    width: 2.65em;
    height: 100%;
  }

  p {
    margin-left: 2em;
  }
}

Подробнее см. здесь

Answer 2

Сначала дайте вашей таблице стилей включить строку id = "cssElement" или что-то еще.

Затем, используя jQuery:

$(document).ready(function(){   

   // The event for orientation change
   var onChanged = function() {

      // The orientation
      var orientation = window.orientation;

      if(orientation == 90) { 
          $('#cssElement').attr('href', '/path/to/landscape.css');
      } else {
          $('#cssElement').attr('href', '/path/to/portrait.css');
      }

   };

   // Bind the orientation change event and bind onLoad
   $(window).bind(orientationEvent, onChanged).bind('load', onChanged);

});

Answer 3

Мне кажется, что приведенный ниже код JQuery лучше всего работает ... примеры привязки - нет.

$(document).ready(function() {
               $(window).resize(function() {
                  alert(window.orientation);
                  });
               });

Answer 4

Вы можете использовать событие window.onorientationchange.