Могу ли я вызвать событие CSS в мобильном сафари при изменении ориентации iphone? - PullRequest
Новая
       16

Могу ли я вызвать событие CSS в мобильном сафари при изменении ориентации iphone?

19 голосов
/ 22 февраля 2010

Я пытаюсь выяснить, как изменить встроенную веб-страницу, когда пользователь поворачивает свой телефон из портретного в альбомный режим - в основном, чтобы загрузить вид, который лучше подходит для более широкого формата экрана. Можно ли обойтись без вызова новой страницы с сервера, т. Е. Управлять ею изнутри самого CSS / Javascript?

Спасибо!

Ответы [ 6 ]

19 голосов
/ 22 февраля 2010

Вы можете использовать свойство window.orientation. Его значение - это степень использования текущего режима просмотра. Вот краткий пример: 

function updateOrientation()
{   
    var orientation=window.orientation;
    switch(orientation)
    {

        case 0:

                break;  

        case 90:
                break;

        case -90:   

                break;
    }

}

Вы можете использовать эту функцию в этом событии: 

window.onorientationchange=updateOrientation;

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

7 голосов
/ 21 апреля 2010

Лучше не устанавливать свойство onorientationchange напрямую. Вместо этого используйте следующее: 

window.addEventListener('orientationchange', function (evt) {
    switch(window.orientation) {
        case 0: // portrait
        case 180: // portrait
        case 90: // landscape
        case -90: // landscape
    }
}, false);
5 голосов
/ 16 мая 2011

Не могу поверить, что никто не говорил о решении 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 голосов
/ 22 февраля 2010

Мобильный браузер 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) будет поддерживать его.

0 голосов
/ 22 февраля 2010 
<body onorientationchange="updateOrientation();">

От: Руководство по веб-контенту Safari

0 голосов
/ 22 февраля 2010

Safari Mobile поддерживает события ориентации .

...