Может ли js/jQuery определить ориентацию iPhone?

Из любопытства я играл с jQuery, чтобы определить размер экрана браузера, и мне пришло в голову, что размер экрана можно использовать для определения того, пользовался ли посетитель iPhone/iTouch посетителем сайта.

Поэтому для проверки этого я использовал следующее:

$(document).ready(

    function() {

        var screenX = screen.width,
            screenY = screen.height;

        alert("X: " + screenX + " Y: " + screenY);

        if (screenX == 320 && screenY == 396) {
            $('div#wrap').css('background-color','#f00');
        }

        else if (screenY == 320 && screenX == 396) {
            $('div#wrap').css('background-color','#0f0');
        }
    }
);

При просмотре страницы через iPhone я замечаю, что размеры последовательно (независимо от ориентации):

x: 320, y: 396

Это независимо от ориентации. Я еще не пытался использовать событие onChange для обнаружения изменений (главным образом потому, что я еще новичок в jQuery), но я задавался вопросом, существует ли способ определить через jQuery или простой javascript Ориентация iPhone/iTouch?

Ответы

Ответ 1

window.orientation даст вам целое число, которое обозначает вращение. Вы можете прослушать изменения ориентации, добавив событие в тело:

<body onorientationchange="updateOrientation();">

Просто на случай, что ссылка умирает или перемещается в какой-то момент:

Value  |  Description
-------+-------------------------------------------------------------------------------
 0     |  Portrait orientation. This is the default value.
-90    |  Landscape orientation with the screen turned clockwise.
 90    |  Landscape orientation with the screen turned counterclockwise.
 180   |  Portrait orientation with the screen turned upside down. This value is currently not supported on iPhone.

Ответ 2

jQuery(window).bind('orientationchange', function(e) {

  switch ( window.orientation ) {

    case 0:
        alert('portrait mode');
    break;

    case 90:
        alert('landscape mode screen turned to the left');
    break;

    case -90:
        alert('landscape mode screen turned to the right');
    break;

  }

});

изменить

Пока это нормально для iPhone, он может работать неправильно на других устройствах.

Я хотел бы добавить некоторую информацию, которую я нашел в http://phoboslab.org/log/2012/06/x-type-making-of

И его пример более совместим с браузером/устройством.

Mobile Safari и Chrome поддерживают событие changechange, что делает это легко. Однако мы не можем полагаться на window.orientation, который сообщает о вращении в градусах (0, 90, 180 или 270), потому что некоторые устройства сообщают 0 ° для портретного режима, в то время как другие сообщают 0 ° для пейзаж. Как удобно!

Решение состоит в том, чтобы просто проверить, больше ли высота окна больше ширина - если это так, мы, очевидно, в портретном режиме! Но поскольку это было бы слишком просто, Chrome Browser предлагает еще один вызов для нас: это только обновляет размеры окна после того, как он произвел изменение ориентации мероприятие. Поэтому мы прислушиваемся к изменениям ориентации и изменения размера. Вздох.

var wasPortrait = -1;
var checkOrientation = function() {
    var isPortrait = (window.innerHeight > window.innerWidth);
    if( isPortrait === wasPortrait ) { return; // Nothing to do here }
    wasPortrait = isPortrait;

    // Do your stuff...
};
window.addEventListener( 'orientationchange', checkOrientation, false );
window.addEventListener( 'resize', checkOrientation, false );

Ответ 4

Только для мобильных телефонов /TABLETS 

switch ( window.orientation ) {

    case 0:
        alert('portrait mode');
    break;

    case 90:
        alert('landscape mode screen turned to the left');
    break;

    case -90:
        alert('landscape mode screen turned to the right');
    break;

}

Это работает только для телефонов и планшетов! Основная ориентация (случай 0) различается между таблетками. Корпус Samsung 0 - это пейзаж, iPad - это портрет.

Ответ 5

Я попробовал аналогичный подход для кросс-платформенных таблиц, используя .height() и .width(), а затем сравнивая, что больше. Он работает в iOS5 (протестирован на Ipad2) и BlackBerry Rim, но явно не на Android (3.2 и 4.0.3). В Android при первой загрузке сайта он дает мне правильную высоту и ширину, но затем меняет ориентацию экрана, это всегда на один шаг. Ex. используя размеры 800x1200, начиная с портретного режима:
ч: 1200 Вт: 800 (портрет)
ч: 1200 Вт: 800 (пейзаж)
ч: 800 Вт: 1200 (портрет)
ч: 1200 Вт: 800 (пейзаж)

Глядя на то, что я справился с этим решением с помощью CSS3:
Как использовать javascript условно, как медиа-запросы CSS3, ориентация?
Вероятно, это лучше, чем настройка решения Js.