Я знаю, что в 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).
Фактическое поведение для разных устройств несовместимо. События изменения размера и ориентации могут меняться в различной последовательности с различной частотой. Кроме того, некоторые значения (например, 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 | |----------------+-------------------+-------------+------------+--------------|
Отличный ответ с двумя бит-дурами обеспечивает весь фон, но позвольте мне попробовать краткое, прагматичное резюме того, как обрабатывать изменения ориентации в iOS и Android:
resize.window.innerWidth и window.InnerHeight.window.orientation - это не будет актуально для iOS.resize на Android и только событие orientationchange на iOS.window.orientation (и window.innerWidth и window.InnerHeight)Эти подходы дают небольшие преимущества перед тем, как запомнить предыдущую ориентацию и сравнить:
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 polyfill, он основан на атрибуте @media для исправления библиотеки утилиты orientchange-- orientationchange-fix
window.addEventListener('orientationchange', function(){
if(window.neworientation.current === 'portrait|landscape'){
// do something……
} else {
// do something……
}
}, false);
Небольшой вклад в ответ двухбитового дурака:
Как описано в таблице на телефонах с дроидами, событие "changechange" запускается раньше, чем событие "изменить размер", таким образом блокируя следующий вызов изменения размера (из-за оператора if). Свойство Width еще не установлено.
Обходной путь, возможно, не идеальный, может заключаться в том, чтобы не запускать событие "changechange". Это можно заархивировать путем обвязки привязки привязки "orientationchange" в выражении "if":
if (!navigator.userAgent.match(/android/i))
{
window.addEventListener("orientationchange", checkOrientation, false);
}
Надеюсь, что это поможет
(тесты проводились на Nexus S)