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

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

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

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

Чтобы обнаружить изменение ориентации в браузере Android, присоедините прослушиватель к событию resize или 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).

Фактическое поведение на разных устройствах является непоследовательным . События изменения размера и ориентации могут меняться в другой последовательности с различной частотой. Кроме того, некоторые значения (например, 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, существует множество разновидностей устройств. ПРИМЕЧАНИЕ. События перечислены в том порядке, в котором они были запущены.

 | ================================================= ============================= |
 |  Устройство |  События уволены |  Ориентация |  Внутренняя ширина |  Screen.width |
 | ================================================= ============================= |
 |  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 phone |  Ориентация |  90 |  320 |  320 |
 |  (К пейзажу) |  Изменить размер |  90 |  569 |  569 |
 | ---------------- + ------------------- + ------------ - + ------------ + -------------- |
 |  Droid phone |  Ориентация |  0 |  569 |  569 |
 |  (К портрету) |  Изменить размер |  0 |  320 |  320 |
 | ---------------- + ------------------- + ------------ - + ------------ + -------------- |
 |  Галактика Samsung |  Ориентация |  0 |  400 |  400 |
 |  Планшет |  Ориентация |  90 |  400 |  400 |
 |  (К пейзажу) |  Ориентация |  90 |  400 |  400 |
 |  |  Изменить размер |  90 |  683 |  683 |
 |  |  Ориентация |  90 |  683 |  683 |
 | ---------------- + ------------------- + ------------ - + ------------ + -------------- |
 |  Галактика Samsung |  Ориентация |  90 |  683 |  683 |
 |  Планшет |  Ориентация |  0 |  683 |  683 |
 |  (К портрету) |  Ориентация |  0 |  683 |  683 |
 |  |  Изменить размер |  0 |  400 |  400 |
 |  |  Ориентация |  0 |  400 |  400 |
 | ---------------- + ------------------- + ------------ - + ------------ + -------------- |

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

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

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

  • Подход, основанный на измерениях, также работает при разработке на настольных браузерах, которые могут имитировать мобильные устройства, например, 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); 

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

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

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

 webView.setWebChromeClient(new WebChromeClient()); 

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

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

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

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

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

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

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

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

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

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

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

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

Intereting Posts
Может андроид приложение проверить версию телефона WebSocket в Android WebView Как быстро загрузить WebView и добавить к нему индикатор выполнения Как искать похожие строки в SQLite В буфере событий GreenRobot отсутствует аннотация, «нет публичных методов», Как добавить значения в массив при нажатии кнопки в android Кнопка Android ShowCaseView ButtonLayoutParams не будет работать Переключение между изображениями Android Navigation Drawer и Up caret при использовании фрагментов Будет ли Android поддерживать WebSockets в предстоящей версии? EBook parser (.azw, .mobi, epub)? Каков правильный способ обработки действия NEW_OUTGOING_CALL во время цикла? Ошибка, включая Android-DirectionalViewPager .jar в Eclipse Android подключается к локальному хосту ПК при отладчике на мобильном устройстве Мое приложение работает на Android 2.2 и Android 2.3.3, но не на Android Galaxy Android 2.3.5 / Читайте в facebook, twitter contacts? Android: как определить, запущен ли IntentService?