Событие направления jQuery Mobile

Событие orientationchange jQuery Mobile

Событие orientationchange срабатывает при вращении устройства пользователем в вертикальном или горизонтальном положении.

Мобильный

Мобильный

Чтобы использовать событие orientationchange, добавьте его к объекту window:

$(window).on("orientationchange",function(){
  alert("Направление изменено!");
});

Функция callback может установить параметр, объект event, который возвращает направление устройства: "portrait" (устройство удерживается в вертикальном положении) или "landscape" (устройство удерживается в горизонтальном положении):

Пример

$(window).on("orientationchange",function(event){
  alert("Направление: " + event.orientation);
});

Попробуйте это на практике

Поскольку событие orientationchange связано с объектом window, мы можем использовать свойство window.orientation, например, чтобы установить различные стили для отличия между портретным и ландшафтным режимами просмотра:

Пример

$(window).on("orientationchange",function(){
  if(window.orientation == 0) // Портрет
  {
    $("p").css({"background-color":"yellow","font-size":"300%"});
  }
  else // Ландшафт
  {
    $("p").css({"background-color":"pink","font-size":"200%"});
  }
});

Попробуйте это на практике

Совет:Пропорция окна window.orientation для портретного вида составляет 0, для ландшафтного вида 90 или -90.