Может ли js / jQuery определить ориентацию iPhone? - PullRequest
Новая
       66

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

20 голосов
/ 24 февраля 2010

Из любопытства я играл с 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?

Ответы [ 5 ]

46 голосов
/ 24 февраля 2010

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.
22 голосов
/ 18 июля 2012 
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 поддерживают событие смены ориентации, что делает это легко. Тем не менее, мы не можем полагаться на window.orientation, который сообщает поворот в градусах (0, 90, 180 или 270), потому что некоторые устройства сообщают 0 ° для портретного режима, в то время как другие сообщают 0 ° для пейзаж. Как удобно!

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

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 );
3 голосов
/ 24 февраля 2010
2 голосов
/ 04 февраля 2013

ТОЛЬКО мобильные телефоны / планшеты 

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 0 - портретный.

1 голос
/ 17 февраля 2012

Я попробовал аналогичный подход для кроссплатформенных планшетов, используя .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.

...