Я нашел этот код теста ориентации ниже в поисках справочного материала JQTouch Это работает правильно в симуляторе iOS на мобильном Safari, но неправильно обрабатывается в Phonegap. Мой проект сталкивается с той же проблемой, которая убивает эту тестовую страницу. Есть ли способ почувствовать изменение ориентации с помощью JavaScript в PhoneGap?
window.onorientationchange = function() {
/*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode with the screen turned to the
left, or landscape mode with the screen turned to the right. */
var orientation = window.orientation;
switch (orientation) {
case 0:
/* If in portrait mode, sets the body's class attribute to portrait. Consequently, all style definitions matching the body[class="portrait"] declaration
in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
document.body.setAttribute("class", "portrait");
/* Add a descriptive message on "Handling iPhone or iPod touch Orientation Events" */
document.getElementById("currentOrientation").innerHTML = "Now in portrait orientation (Home button on the bottom).";
break;
case 90:
/* If in landscape mode with the screen turned to the left, sets the body's class attribute to landscapeLeft. In this case, all style definitions matching the
body[class="landscapeLeft"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
document.body.setAttribute("class", "landscape");
document.getElementById("currentOrientation").innerHTML = "Now in landscape orientation and turned to the left (Home button to the right).";
break;
case -90:
/* If in landscape mode with the screen turned to the right, sets the body's class attribute to landscapeRight. Here, all style definitions matching the
body[class="landscapeRight"] declaration in the iPhoneOrientation.css file will be selected and used to style "Handling iPhone or iPod touch Orientation Events". */
document.body.setAttribute("class", "landscape");
document.getElementById("currentOrientation").innerHTML = "Now in landscape orientation and turned to the right (Home button to the left).";
break;
}
}
Ответы:
Вот что я делаю:
Обновление от мая 2019 года:
window.orientation
устарела и не поддерживается большинством браузеров, согласно MDN .orientationchange
Событие связано с window.orientation и , следовательно , должны , вероятно , не будет использоваться.источник
window.onorientationchange = function() { setTimeout(functionName, 0); };
Я использую
window.onresize = function(){ checkOrientation(); }
И в checkOrientation вы можете использовать window.orientation или проверку ширины тела, но идея в том, что «window.onresize» является наиболее кросс-браузерным методом, по крайней мере, с большинством браузеров для мобильных и настольных компьютеров, которые у меня были. возможность проверить с.источник
источник
resize
событию. Тем не менее, IIRC, эти запросы не будут работать правильно с клавиатурой вверх.Я довольно новичок в iOS и Phonegap, но я смог сделать это, добавив eventListener. Я сделал то же самое (используя пример, на который вы ссылаетесь), и не смог заставить его работать. Но это, казалось, добилось цели:
Возможно, вам повезет, когда вы поищите в Google Group PhoneGap термин «ориентация» .
Один пример, о котором я читал в качестве примера того, как определить ориентацию, был Pie Guy: ( игра , файл js ). Это похоже на код, который вы опубликовали, но, как и вы ... Я не смог заставить его работать.
Одно предостережение: eventListener работал для меня, но я не уверен, что это слишком интенсивный подход. До сих пор это был единственный способ, который работал для меня, но я не знаю, есть ли лучшие, более обтекаемые способы.
ОБНОВЛЕНИЕ исправил код выше, теперь работает
источник
При работе с
orientationchange
событием мне понадобился тайм-аут, чтобы получить правильные размеры элементов на странице, но matchMedia работала нормально. Мой окончательный код:источник
Я считаю, что правильный ответ уже был опубликован и принят, но есть проблема, с которой я столкнулся и о которой некоторые другие упоминали здесь.
На некоторых платформах различные свойства, такие как размеры окна (
window.innerWidth
,window.innerHeight
) иwindow.orientation
свойство, не будут обновлены к моменту возникновения события"orientationchange"
. Много раз, свойствоwindow.orientation
это вundefined
течение нескольких миллисекунд после обжига"orientationchange"
(по крайней мере, в Chrome на IOS).Лучший способ найти решение этой проблемы:
Я проверяю, является ли ориентация либо неопределенной, либо ориентация равна последней обнаруженной ориентации. Если любое из этих значений истинно, я жду десять миллисекунд и затем снова анализирую ориентацию. Если ориентация правильная, я вызываю
showXOrientation
функции. Если ориентация неверна, я продолжаю цикл проверки, ожидая десять миллисекунд каждый раз, пока она не станет действительной.Теперь я бы сделал JSFiddle для этого, как обычно делал, но JSFiddle не работал для меня, и моя ошибка поддержки для него была закрыта, так как никто другой не сообщил об этой проблеме. Если кто-то еще хочет превратить это в JSFiddle, пожалуйста, продолжайте.
Спасибо! Надеюсь, это поможет!
источник
вот что я сделал:
источник
Хотя вопрос касается только использования PhoneGap и iOS, и хотя на него уже был дан ответ, я могу добавить несколько моментов к более широкому вопросу определения ориентации экрана с помощью JS в 2019 году:
window.orientation
свойство устарело и не поддерживается браузерами Android. Существует более новое свойство, которое предоставляет больше информации об ориентации -screen.orientation
. Но он все еще экспериментальный и не поддерживается iOS Safari . Таким образом , для достижения наилучшего результата вы , вероятно , нужно использовать комбинацию из двух:const angle = screen.orientation ? screen.orientation.angle : window.orientation
.Как упомянул @benallansmith в своем комментарии ,
window.onorientationchange
событие вызывается раньшеwindow.onresize
, поэтому вы не получите фактические размеры экрана, если не добавите некоторую задержку после события directionalchange.Существует плагин Cordova Screen Orientation для поддержки старых мобильных браузеров, но я считаю, что в настоящее время его не нужно использовать.
Также было
screen.onorientationchange
событие, но оно устарело и не должно использоваться. Добавлено только для полноты ответа.В моем случае использования я не заботился о фактической ориентации, а скорее о фактической ширине и высоте окна, которая, очевидно, меняется с ориентацией. Поэтому я использовал
resize
событие, чтобы избежать задержек междуorientationchange
событием и актуализацией размеров окна:Примечание 1: здесь я использовал синтаксис EcmaScript 6, при необходимости обязательно скомпилируйте его в ES5.
Примечание 2:
window.onresize
событие также вызывается при переключении виртуальной клавиатуры , а не только при изменении ориентации.источник
Я нашел этот код, чтобы определить, находится ли устройство в альбомной ориентации, и в этом случае добавить всплывающую страницу с надписью «изменить ориентацию, чтобы увидеть сайт». Работает на iOS, Android и Windows Phone. Я думаю, что это очень полезно, так как это довольно элегантно и избегать установки альбомной ориентации для мобильного сайта. Код работает очень хорошо. Единственное, что не совсем устраивает, это то, что если кто-то загружает страницу в альбомной ориентации, всплывающая страница не появляется.
И HTML:
<div id="alert" class="hide"> <div id="content">This site is not thought to be viewed in landscape mode, please turn your device </div> </div>
источник
источник
У меня сработало следующее:
Мне нужно время ожидания, потому что значение
window.orientation
не обновляется сразуисточник
Я создаю приложение jQTouch в PhoneGap для iPhone. Я боролся с этой проблемой в течение нескольких дней. Я видел предложенное решение Eventlistener несколько раз, но просто не смог заставить его работать.
В конце концов я придумал другое решение. Он в основном проверяет ширину тела периодически, используя settimeout. Если ширина равна 320, то ориентация книжная, если 480, то альбомная. Затем, если ориентация изменилась со времени последней проверки, она запустит либо функцию портретного заполнения, либо функцию ландшафтного заполнения, где вы можете выполнить свою задачу для каждой ориентации.
Код (заметьте, я знаю, что в коде есть некоторое повторение, но пока не удосужился его урезать!):
источник
onresize
событие, которое сработает немедленно, а не через 500 миллисекунд. 2) Этот код специфичен для Android, используйтеonorientationchange
вместо этого для iPhone 3) Проверьте, поддерживается ли он в браузере:"onorientationchange" in window