Могу ли я определить, находится ли устройство в портретном или ландшафтном режиме с помощью jquery?

Я хочу условно изменить то, что пользователь видит на веб-сайте фотогалереи, который я собираюсь создать, на основе того, находится ли устройство, используемое для просмотра сайта, в портретном/вертикальном или альбомном/горизонтальном режиме/ориентации. Это возможно?


javascript jquery screen-orientation jquery-mobile landscape-portrait
person B. Clay Shannon    schedule 12.04.2013    source источник
comment
Этот предыдущий ответ может помочь: ссылка   -  person mconlin    schedule 13.04.2013
comment
Все хорошие ответы; Я еще не уверен, какой из них предпочесть. Собственно, мне тоже нужно знать, является ли аппарат телефоном или нет. Вот метод, лежащий в основе моего безумия: у меня будет два вида — один с вертикальными эскизами и полноразмерными фотографиями, другой с пейзажными эскизами и полноразмерными фотографиями. Если устройство представляет собой телефон, я хочу, чтобы он переключался между этими режимами в зависимости от ориентации. Однако для более крупного устройства (например, ноутбука или настольного компьютера) я хочу разрешить пользователю явно выбирать, какую ориентацию фотографий он хочет видеть.   -  person B. Clay Shannon    schedule 13.04.2013

Ответы (2)


arrow_upward
6
arrow_downward

Попробуйте обработчик событий orientationchange, например:

$(window).bind("orientationchange", function(evt){
    alert(evt.orientation);
});

Вот запись jQuery Mobile об обнаружении и запуске события orientationchange.

person Abbas    schedule 12.04.2013
comment
Извините, я опечатался. Исправил на evt.orientation. - person Abbas; 13.04.2013

arrow_upward
1
arrow_downward

Если вы просто меняете макет, рассмотрите вместо этого CSS Media Queries. .

В Chrome 7 и Firefox 3.6 есть deviceorientation событие, которое вы можете слушать.

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

Что касается вариантов планшет-телефон

  • Если ваше устройство является телефоном, вы можете переключать CSS с помощью медиазапросов в зависимости от ориентации устройства.

  • Если устройство является планшетом, вы можете переключать CSS с помощью JS, используя переключение идентификатора/класса тела или заменяя таблицы стилей.

person Joseph    schedule 12.04.2013