Можно ли инициировать событие CSS в мобильном сафари при изменении ориентации iphone?
Я пытаюсь понять, как изменить встроенную веб-страницу, когда пользователь поворачивает свой телефон от портретного до ландшафтного режима - в основном для загрузки представления, которое лучше подходит для более широкого формата экрана. Можно ли обойтись без вызова новой страницы с сервера, т.е. Для ее извлечения из самого CSS/Javascript?
Спасибо!
Ответы
Ответ 1
Вы можете использовать свойство window.orientation
. Его значение - это степень, в которой используется текущий режим просмотра. Вот краткий пример:
function updateOrientation()
{
var orientation=window.orientation;
switch(orientation)
{
case 0:
break;
case 90:
break;
case -90:
break;
}
}
Вы можете использовать эту функцию для этого события:
window.onorientationchange=updateOrientation;
Надеюсь, что это поможет!
Ответ 2
Лучше не устанавливать свойство onorientationchange
напрямую. Вместо этого используйте следующее:
window.addEventListener('orientationchange', function (evt) {
switch(window.orientation) {
case 0: // portrait
case 180: // portrait
case 90: // landscape
case -90: // landscape
}
}, false);
Ответ 3
Мобильный браузер Safari имеет поддержку orientationchange
события, а также orientation
собственность на окне, так что вы можете сделать что - то вроде:
window.onorientationchange = function() {
switch(window.orientation) {
case 0: // Portrait
case 180: // Upside-down Portrait
// Javascript to setup Portrait view
break;
case -90: // Landscape: turned 90 degrees counter-clockwise
case 90: // Landscape: turned 90 degrees clockwise
// Javascript to steup Landscape view
break;
}
}
Я бы добавил перевернутую, потому что в руководствах по интерфейсу iPad для людей сказано, что вы должны поддерживать все ориентации, поэтому я ожидаю, что Safari на iPad (и, возможно, в будущих версиях iPhone) будет поддерживать его.
Ответ 4
Я не могу поверить, что никто не говорил о решении css:
@media screen and (max-width: 320px) // Portait Mode
{
/* CSS RULINGS */
p{}
body{}
}
@media screen and (min-width: 321px) // Landscape Mode
{
/* CSS RULINGS */
p{}
body{}
}
Ответ 5
Safari Mobile поддерживает события ориентации.
Ответ 6
<body onorientationchange="updateOrientation();">
От: Руководство по веб-контенту Safari