iPad не запускает событие изменения размера с вертикального на горизонтальное?

Question

Кто-нибудь заметил это поведение? Я пытаюсь написать скрипт, который сработает при изменении размера. Он отлично работает в обычных браузерах, отлично работает на iPhone, но на iPad будет вызывать переход только из горизонтального в вертикальное окно просмотра, а не наоборот.

Вот код:

$(window).resize( function() {

    var agent=navigator.userAgent.toLowerCase();
    var is_iphone = ((agent.indexOf('iphone') != -1));
    var is_ipad = ((agent.indexOf('ipad') != -1));

    if(is_iphone || is_ipad){
        location.reload(true);
    } else {     
        /* Do stuff. */
    };
});

Answer 1

Если я вас правильно понял, вы хотите что-то сделать, когда пользователь наклоняет iPad. Вот, пожалуйста:

window.onorientationchange = function(){

    var orientation = window.orientation;

    // Look at the value of window.orientation:

    if (orientation === 0){

        // iPad is in Portrait mode.

    }

    else if (orientation === 90){

        // iPad is in Landscape mode. The screen is turned to the left.

    }


    else if (orientation === -90){

        // iPad is in Landscape mode. The screen is turned to the right.

    }

}

Answer 2

Я думаю, что вы хотели бы использовать iPad Orientation CSS , который выглядит следующим образом:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />

Кроме того, событие orientationchange срабатывает при изменении ориентации, согласно советам по веб-разработке для iPad .

Вместе, это должно дать вам достаточно инструментов, чтобы справиться с изменениями.

Answer 3

Это включает в себя все направления.

Вот два варианта:

window.onorientationchange = function() {

    var orientation = window.orientation;

    // Look at the value of window.orientation:

    if (orientation === 0) {
    // iPad is in Portrait mode.

    } else if (orientation === 90) {
     // iPad is in Landscape mode. The screen is turned to the left.

    } else if (orientation === -90) {
     // iPad is in Landscape mode. The screen is turned to the right.

    } else if (orientation === 180) {
    // Upside down portrait.

    }
}    

или

// Checks to see if the platform is strictly equal to iPad:
    if(navigator.platform === 'iPad') {
            window.onorientationchange = function() {

            var orientation = window.orientation;

            // Look at the value of window.orientation:

            if (orientation === 0) {
            // iPad is in Portrait mode.

            } else if (orientation === 90) {
             // iPad is in Landscape mode. The screen is turned to the left.

            } else if (orientation === -90) {
             // iPad is in Landscape mode. The screen is turned to the right.

            } else if (orientation === 180) {
            // Upside down portrait.

            }
          }       
        }

Answer 4

Вы хотите это исправление для ошибки ориентации на iphone и ipad. читайте об этом здесь: http: //www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug /

github последняя версия здесь: https: //gist.github.com/901295 используйте вторую версию на странице.

Answer 5

Единственное, что я смог найти из яблока :

Safari на iPad и Safari на iPhone не имеют изменяемых размеров окон. В Safari на iPhone и iPad размер окна устанавливается равным размеру экрана (за исключением элементов управления пользовательского интерфейса Safari) и не может быть изменен пользователем. Чтобы перемещаться по веб-странице, пользователь изменяет уровень масштабирования и положение области просмотра, когда он дважды нажимает или сжимает, чтобы увеличивать или уменьшать масштаб, или касаясь и перетаскивая его для перемещения по странице. Когда пользователь изменяет уровень масштабирования и положение области просмотра, он делает это в видимой области содержимого фиксированного размера (то есть в окне). Это означает, что элементы веб-страницы, чье положение «зафиксировано» в области просмотра, могут оказаться за пределами видимой области содержимого вне экрана.

Я понимаю часть "работает на iPhone" ... но, может быть, больше нет? Это может быть изменением в OS / mobile Safari с момента выпуска последней общедоступной версии iPhone OS (вышеуказанная документация от марта 2010 года).

Я собираюсь пометить этот вопрос, добавив в него iPhone, может, один из парней с выпуском ОС для разработчиков 4.0 может это проверить? Если это тот случай, когда он был удален, это должно быть ошибкой, поданной / исправленной до того, как она выйдет в эфир ... Хотя я не уверен, как обстоят дела с этим в Apple.

Answer 6

1. сделайте хорошую проверку, если ваша платформа iPad,

2. обработать изменение ориентации конкретного события iOS, перехватывая window.onorientationchange

   if(navigator.platform == 'iPad') {
       window.onorientationchange = function() {
           // handle orientationchange event
           // (here you can take advantage of the orientation property
           //     - see the good answer above by Vincent)
       }       
   }
   

Answer 7

Проверьте вашу версию iOS.

Событие «directionalchange» не работает в iOS 3. *, но в 4. *