Виявити обертання телефону Android в браузері за допомогою JavaScript

Я знаю, що в Safari на iPhone ви можете виявити орієнтацію екрана та зміну орієнтації, прослуховуючи onorientationchangeподію та запитуючи window.orientationкут.

Чи можливо це в браузері на телефонах Android?

Щоб було зрозуміло, я запитую, чи можна обертати пристрій Android за допомогою JavaScript, який працює на стандартній веб-сторінці. Це можливо на iPhone, і я задумався, чи можна це зробити для телефонів Android.

Щоб виявити зміну орієнтації в браузері 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).

Фактична поведінка на різних пристроях невідповідна . Події зміни розміру та орієнтаціїChange можуть запускатись в різній послідовності з різною частотою. Також деякі значення (наприклад, ширина екрана та орієнтація вікон) не завжди змінюються, коли ви очікуєте. Уникайте ширини екрана - вона не змінюється при обертанні в iOS.

Надійний підхід полягає в прослуховуванні подій як розміру, так і орієнтації ( ChangeChange) (з деякими опитуваннями як захоплення безпеки), і ви з часом отримаєте дійсне значення для орієнтації. У моєму тестуванні 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, на різних пристроях існує велика різноманітність. ПРИМІТКА. Події перераховані в порядку, в якому вони розпочалися.

| ==================================================== ============================== |
| Пристрій | Розпочаті події | орієнтація | внутрішня ширина | ширина екрана |
| ==================================================== ============================== |
| iPad 2 | змінити розмір | 0 | 1024 | 768 |
| (до пейзажу) | зміна орієнтації | 90 | 1024 | 768 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| iPad 2 | змінити розмір | 90 | 768 | 768 |
| (до портрета) | зміна орієнтації | 0 | 768 | 768 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| iPhone 4 | змінити розмір | 0 | 480 | 320 |
| (до пейзажу) | зміна орієнтації | 90 | 480 | 320 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| iPhone 4 | змінити розмір | 90 | 320 | 320 |
| (до портрета) | зміна орієнтації | 0 | 320 | 320 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Droid телефон | зміна орієнтації | 90 | 320 | 320 |
| (до пейзажу) | змінити розмір | 90 | 569 | 569 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Droid телефон | зміна орієнтації | 0 | 569 | 569 |
| (до портрета) | змінити розмір | 0 | 320 | 320 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Samsung Galaxy | зміна орієнтації | 0 | 400 | 400 |
| Планшет | зміна орієнтації | 90 | 400 | 400 |
| (до пейзажу) | зміна орієнтації | 90 | 400 | 400 |
| | змінити розмір | 90 | 683 | 683 |
| | зміна орієнтації | 90 | 683 | 683 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |
| Samsung Galaxy | зміна орієнтації | 90 | 683 | 683 |
| Планшет | зміна орієнтації | 0 | 683 | 683 |
| (до портрета) | зміна орієнтації | 0 | 683 | 683 |
| | змінити розмір | 0 | 400 | 400 |
| | зміна орієнтації | 0 | 400 | 400 |
| ---------------- + ------------------- + ------------ - + ------------ + -------------- |

Чудова відповідь двох біт-дурня забезпечує все передумови, але дозвольте спробувати стислий, прагматичний підсумок, як впоратися зі змінами орієнтації в iOS та Android :

• Якщо ви дбаєте лише про розміри вікон (типовий сценарій) - а не про конкретну орієнтацію:
  • Обробляти лише resizeподію.
  • У своєму обробнику діяти тільки window.innerWidthі window.InnerHeightтільки.
  • НЕ використовуйте window.orientation- це не буде поточним на iOS.

• Якщо Ви дбаєте про конкретну орієнтацію :
  • Обробляти тільки на resizeподію на Android, і тільки на orientationchangeподію на прошивці.
  • Дійте на window.orientation(і window.innerWidthта window.InnerHeight)

Ці підходи пропонують невелику користь від запам'ятовування попередньої орієнтації та порівняння:

• підхід лише для розмірів також працює під час розробки на настільних браузерах, які в іншому випадку можуть імітувати мобільні пристрої, наприклад, Chrome 23. ( window.orientationнедоступно для настільних браузерів).
• немає потреби в глобальній / анонімній-файлі-рівень-функції-обгортці змінної рівня.

Ви завжди можете прослухати подію зміни розміру вікна. Якщо в цьому випадку вікно перейшло від високого, ніж широкого до ширшого, ніж високе (або навпаки), ви можете бути впевнені, що орієнтація телефону була просто змінена.

Це можливо в 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);

Він також підтримує браузери deskop, але він завжди повертатиме те саме значення.

У мене була така ж проблема. Я використовую 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);
}

Ось таке рішення:

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");
            }   
        });
    }

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

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

Далі йде orientationchangeкартина сумісності: отже, я автор orientaionchangeполіфайли, він заснований на атрибуті @media, щоб виправити орієнтацію змінити бібліотеку утиліт—— orientachange -fix

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

Варто зазначити, що на моєму Epic 4G Touch мені довелося налаштувати веб-перегляд, щоб використовувати WebChromeClient до того, як працював будь-який з дзвінків Android для Android.

webView.setWebChromeClient(new WebChromeClient());

Перехресний браузерний шлях

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

Невеликий внесок у відповідь двома дурнями:

Як описано в таблиці на дроїдних телефонах подія "орієнтації на зміну" подія запускається раніше, ніж подія "зміни розміру", таким чином блокуючи наступний виклик зміни розміру (через заяву if). Властивість ширини все ще не встановлено.

Хоча рішення, яке, можливо, не є ідеальним, щоб не розпочати подію "зміни орієнтації". Це можна заархівувати, обернувши прив'язку події "орієнтація зміни" в оператор "якщо":

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

Сподіваюся, це допомагає

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