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

Ответ 1

Чтобы обнаружить изменение ориентации в браузере 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).

Ответ 2

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

Надежный подход заключается в прослушивании как изменений размера, так и ориентации. Изменить события (с некоторым опросом в качестве защитного ключа), и в конечном итоге вы получите действительное значение для ориентации. В моем тестировании устройства 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          |
|----------------+-------------------+-------------+------------+--------------|

Ответ 3

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

• Если вы только заботитесь о размерах окна (типичный сценарий), а не о конкретной ориентации:
  • Обрабатывать только событие resize.
  • В вашем обработчике действуйте только на window.innerWidth и window.InnerHeight.
  • НЕ использовать window.orientation - это не будет актуально для iOS.

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

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

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

Ответ 4

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

Ответ 5

Это возможно в 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);

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

Ответ 6

У меня была та же проблема. Я использую Phonegap и JQuery mobile для устройств Adroid. Чтобы правильно изменить размер, мне пришлось установить тайм-аут:

$(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);
}

Ответ 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");
            }   
        });
    }

Ответ 8

Стоит отметить, что на моем Epic 4G Touch мне пришлось настроить веб-просмотр, чтобы использовать WebChromeClient, прежде чем работал какой-либо из javascript-вызовов Android.

webView.setWebChromeClient(new WebChromeClient());

Ответ 9

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

Ответ 10

Способ перекрестного браузера

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

Ответ 11

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

Ниже приведено orientationchange совместимость pic: поэтому я автор orientaionchange polyfill, он основан на атрибуте @media для исправления библиотеки утилиты orientchange-- orientationchange-fix

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

Ответ 12

Небольшой вклад в ответ двухбитового дурака:

Как описано в таблице на телефонах с дроидами, событие "changechange" запускается раньше, чем событие "изменить размер", таким образом блокируя следующий вызов изменения размера (из-за оператора if). Свойство Width еще не установлено.

Обходной путь, возможно, не идеальный, может заключаться в том, чтобы не запускать событие "changechange". Это можно заархивировать путем обвязки привязки привязки "orientationchange" в выражении "if":

if (!navigator.userAgent.match(/android/i))
{
    window.addEventListener("orientationchange", checkOrientation, false);
}

Надеюсь, что это поможет

(тесты проводились на Nexus S)