Может ли 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?

19
iphone ipod-touch javascript jquery

5 ответов

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

<body onorientationchange="updateOrientation();">

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

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.
46
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;

  }

});

edit:

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

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

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

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

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

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 );
21
3

только мобильные телефоны / планшеты

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;

}

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

2

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

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

1