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

Кто-нибудь заметил это поведение? Я пытаюсь написать script, который вызывается при изменении размера. Он отлично работает в обычных браузерах, отлично работает на 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. */
    };
});

Ответ 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.

    }

}

Ответ 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.

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

Ответ 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.

            }
          }       
        }

Ответ 4

Единственное, что я могу найти из apple:

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

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

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

Ответ 5

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

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

Ответ 6

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

Событие "changechange" не работает в iOS 3. *, но оно выполняется в 4. *

Ответ 7

Сделайте хороший чек, если ваша платформа iPad,

обрабатывает определенную ориентацию событий 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)
    }       
}