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

Question

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

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

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

Answer 1

Фактическое поведение на разных устройствах противоречиво . События resize и directionChange могут запускаться в различной последовательности с различной частотой. Кроме того, некоторые значения (например, screen.width и window.orientation) не всегда меняются, когда вы ожидаете. Избегайте screen.width - он не меняется при повороте в iOS.

Надежный подход заключается в прослушивании событий как resize, так и directionChange (с некоторым опросом в качестве предохранителя), и в конечном итоге вы получите действительное значение для ориентации. В моем тестировании Android-устройства иногда не запускали события при повороте на 180 градусов, поэтому я также включил setInterval для опроса ориентации.

var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // orientation changed, do your magic here
    }
};

window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);

// (optional) Android doesn't always fire orientationChange on 180 degree turns
setInterval(checkOrientation, 2000);

Вот результаты четырех устройств, которые я тестировал (извините за таблицу ASCII, но, похоже, это самый простой способ представить результаты). Помимо согласованности между устройствами iOS, существует большое разнообразие между устройствами. ПРИМЕЧАНИЕ. События перечислены в порядке их возникновения.

|==============================================================================|
|     Device     | Events Fired      | orientation | innerWidth | screen.width |
|==============================================================================|
| iPad 2         | resize            | 0           | 1024       | 768          |
| (to landscape) | orientationchange | 90          | 1024       | 768          |
|----------------+-------------------+-------------+------------+--------------|
| iPad 2         | resize            | 90          | 768        | 768          |
| (to portrait)  | orientationchange | 0           | 768        | 768          |
|----------------+-------------------+-------------+------------+--------------|
| iPhone 4       | resize            | 0           | 480        | 320          |
| (to landscape) | orientationchange | 90          | 480        | 320          |
|----------------+-------------------+-------------+------------+--------------|
| iPhone 4       | resize            | 90          | 320        | 320          |
| (to portrait)  | orientationchange | 0           | 320        | 320          |
|----------------+-------------------+-------------+------------+--------------|
| Droid phone    | orientationchange | 90          | 320        | 320          |
| (to landscape) | resize            | 90          | 569        | 569          |
|----------------+-------------------+-------------+------------+--------------|
| Droid phone    | orientationchange | 0           | 569        | 569          |
| (to portrait)  | resize            | 0           | 320        | 320          |
|----------------+-------------------+-------------+------------+--------------|
| Samsung Galaxy | orientationchange | 0           | 400        | 400          |
| Tablet         | orientationchange | 90          | 400        | 400          |
| (to landscape) | orientationchange | 90          | 400        | 400          |
|                | resize            | 90          | 683        | 683          |
|                | orientationchange | 90          | 683        | 683          |
|----------------+-------------------+-------------+------------+--------------|
| Samsung Galaxy | orientationchange | 90          | 683        | 683          |
| Tablet         | orientationchange | 0           | 683        | 683          |
| (to portrait)  | orientationchange | 0           | 683        | 683          |
|                | resize            | 0           | 400        | 400          |
|                | orientationchange | 0           | 400        | 400          |
|----------------+-------------------+-------------+------------+--------------|

Answer 2

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

// 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).

Answer 3

Отличный ответ

two-bit-fool обеспечивает весь фон, но позвольте мне попробовать краткое, прагматичное резюме того, как обрабатывать изменения ориентации в iOS и Android :

• Если вас волнует только размеры окна (типичный сценарий) - а не конкретная ориентация:
  • Обрабатывать только событие resize.
  • В вашем обработчике действуйте только на window.innerWidth и window.InnerHeight.
  • НЕ ИСПОЛЬЗУЙТЕ window.orientation - он не будет актуальным на iOS.

• Если вам НЕОБХОДИМА особая ориентация :
  • Обрабатывать только событие resize на Android и только orientationchange событие на iOS.
  • В вашем обработчике действуйте на window.orientation (и window.innerWidth и window.InnerHeight)

Эти подходы дают небольшие преимущества по сравнению с запоминанием предыдущей ориентации и сравнением:

• подход, основанный только на измерениях, также работает при разработке в браузерах настольных компьютеров, которые могут имитировать мобильные устройства, например Chrome 23. (window.orientation недоступен в браузерах настольных компьютеров).
• нет необходимости в глобальной / анонимной переменной file-level-function-wrapper-level.

Answer 4

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

Answer 5

У меня была такая же проблема. Я использую PhoneGap и JQuery Mobile, для устройств Android. Для правильного изменения размера я должен был установить таймаут:

$(window).bind('orientationchange',function(e) {
  fixOrientation();
});

$(window).bind('resize',function(e) {
  fixOrientation();
});

function fixOrientation() {

    setTimeout(function() {

        var windowWidth = window.innerWidth;

        $('div[data-role="page"]').width(windowWidth);
        $('div[data-role="header"]').width(windowWidth);
        $('div[data-role="content"]').width(windowWidth-30);
        $('div[data-role="footer"]').width(windowWidth);

    },500);
}

Answer 6

Возможно в HTML5.
Вы можете прочитать больше (и попробовать демо) здесь: http://slides.html5rocks.com/#slide-orientation.

window.addEventListener('deviceorientation', function(event) {
    var a = event.alpha;
    var b = event.beta;
    var g = event.gamma;
}, false);

Он также поддерживает настольные браузеры, но всегда будет возвращать одно и то же значение.

Answer 7

Вот решение:

var isMobile = {
    Android: function() {
        return /Android/i.test(navigator.userAgent);
    },
    iOS: function() {
        return /iPhone|iPad|iPod/i.test(navigator.userAgent);
    }
};
if(isMobile.Android())
    {
        var previousWidth=$(window).width();
        $(window).on({
        resize: function(e) {
        var YourFunction=(function(){

            var screenWidth=$(window).width();
            if(previousWidth!=screenWidth)
            {
                previousWidth=screenWidth;
                alert("oreientation changed");
            }

        })();

        }
    });

    }
    else//mainly for ios
    {
        $(window).on({
            orientationchange: function(e) {
               alert("orientation changed");
            }   
        });
    }

Answer 8

Вы можете попробовать решение, совместимое со всеми браузерами.

Ниже приведена orientationchange картинка совместимости: поэтому я пишу orientaionchange polyfill, он основан на атрибуте @media для исправления служебной библиотеки ориджинации изменений —— Ориентация-исправления

window.addEventListener('orientationchange', function(){
 if(window.neworientation.current === 'portrait|landscape'){
    // do something……
 } else {
    // do something……
 }
}, false);

Answer 9

Еще одна проблема - некоторые планшеты Android (я полагаю, Motorola Xoom и бюджетный Elonex, на котором я провожу некоторые испытания, возможно, и другие) настроили свои акселерометры так, чтобы window.orientation == 0 в режиме LANDSCAPE не портрет!

Answer 10

Кроссбраузерный способ

$(window).on('resize orientationchange webkitfullscreenchange mozfullscreenchange fullscreenchange',  function(){
//code here
});