Обнаружение вращения телефона Android в браузере с помощью JavaScript


188

Я знаю, что в Safari на iPhone вы можете обнаружить ориентацию экрана и изменение ориентации, прослушивая onorientationchangeсобытие и запрашивая window.orientationугол.

Возможно ли это в браузере на телефонах Android?

Чтобы было ясно, я спрашиваю, можно ли обнаружить вращение устройства Android с помощью JavaScript, работающего на стандартной веб-странице. Это возможно на iPhone, и мне было интересно, можно ли это сделать для телефонов Android.

Ответы:


214

Чтобы обнаружить изменение ориентации в браузере Android, присоедините слушателя к событию orientationchangeили :resizewindow

// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width);
}, false);

Проверьте window.orientationсвойство, чтобы выяснить, в каком направлении ориентировано устройство. С телефонов Android, screen.widthа screen.heightтакже обновлений, как устройство поворачивается. (это не тот случай с iPhone).


это действительно работает? я пробовал jquery $ (окно) .bind ("directionalchange", fn); но это не сработало, я должен использовать форму выше? я попробовал "onorientationchange" в окне, оно возвращает false
Ayyash

Это работает хорошо. Айяш - весь смысл в том, что, когда «directionalchange» не поддерживается, он возвращается к «изменению размера»
Дрор

9
На дроиде это совершенно безумно. Он отображает screen.width 320, когда телефон поворачивается в ландшафтном режиме, и обнаруживает screen.width 569, когда телефон поворачивается в портретном режиме! Как придешь??
Игорь Ганапольский

1
Просто чтобы уточнить: Те, кто ищет решение, которое также работает на iOS, должны взглянуть на два-дурака или мой ответ.
mklement0

3
Нет необходимости использовать двух-битный взломать для iOS. Просто используйте screen.width и screen.height на Android и на iOS, используйте window.innerWidth и window.innerHeight.
Джастин
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.