Czy js/jQuery może określić orientację iPhone ' a?

Z ciekawości grałem z jQuery, aby określić rozmiar ekranu przeglądarki, i przyszło mi do głowy, że rozmiar ekranu może być użyty do określenia, czy użytkownik używał iPhone/iTouch, aby wyświetlić stronę.

Więc użyłem następujących do przetestowania tego: 

$(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');
        }
    }
);

Oglądając stronę przez iPhone, zauważam, że wymiary są konsekwentne (niezależnie od orientacji):

X: 320, y: 396

Jest to bez względu na Orientację. Jeszcze nie., próbowałem użyć zdarzenia onChange do wykrycia zmian (głównie dlatego, że wciąż jestem nowy w jQuery), ale zastanawiałem się, czy istnieje sposób na określenie, za pomocą jQuery lub zwykłego javascript, orientacji iPhone/iTouch?

Author: David Thomas, 2010-02-24
Source

5 answers

Okno.orientacja daje liczbę całkowitą oznaczającą obrót. Możesz słuchać zmian orientacji, dodając Zdarzenie do ciała: 

<body onorientationchange="updateOrientation();">

Edytowane przez OP, tylko na wypadek, gdyby link w pewnym momencie umarł lub został przeniesiony...

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
Author: typeoneerror,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-02-25 20:02:16 
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:

Chociaż jest to w porządku dla iPhone ' a, może nie działać poprawnie na innych urządzeniach.

Chciałbym dodać kilka informacji, które znalazłem na http://phoboslab.org/log/2012/06/x-type-making-of

I jego przykład jest bardziej kompatybilny z przeglądarką/urządzeniem.

Mobile Safari i Chrome obsługują wydarzenie orientationchange, co ułatwia sprawę. Nie możemy jednak polegać na oknie.orientacja, który informuje o rotacji w stopniach (0, 90, 180 lub 270), ponieważ niektóre urządzenia zgłaszają 0° w trybie portretowym, podczas gdy inne 0° w trybie portretowym krajobraz. Jak wygodnie!

Rozwiązaniem jest sprawdzenie czy wysokość okna jest większa niż szerokość-jeśli tak, to oczywiście w trybie portretowym! Ale tak by było zbyt łatwa, przeglądarka Chrome stanowi dla nas kolejne wyzwanie: tylko aktualizuje wymiary okna po uruchomieniu orientationchange wydarzenie. Więc słuchamy wydarzeń orientationchange i resize. Westchnienie.

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
Author: Pawel Dubiel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-06 11:06:50
 3
Author: Randal Schwartz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-05 14:10:41

Tylko telefony komórkowe / tablety 

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;

}

To działa tylko na telefony i Tablety! Podstawowa orientacja (przypadek 0) różni się między tabletami. Samsung case 0 to krajobraz, ipad case 0 to portret.

 2
Author: Paulius,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-25 12:32:41

Próbowałem podobnego podejścia do tabletów cross-platform za pomocą .wysokość () i .width (), a następnie porównanie, które jest większe. Działa w iOS5 (testowany na iPad2) i BlackBerry Rim, ale obecnie nie występuje na Androidzie (3.2 i 4.0.3). Na Androidzie po raz pierwszy ładowanie strony daje mi odpowiednią wysokość i szerokość, ale potem zmiana orientacji ekranu jest zawsze o krok w tył.
Ex. korzystanie z wymiarów 800x1200 począwszy od trybu portretowego:
h: 1200 W: 800 (portret)
h: 1200 w: 800 (Pejzaż)
h: 800 W: 1200 (portret)
h: 1200 W: 800 (krajobraz)

Patrząc na to potknąłem się o to rozwiązanie z CSS3:
Jak korzystać z javascript warunkowo jak CSS3 media queries, orientacja?
Jest to prawdopodobnie lepsze niż poprawianie rozwiązania Js.

 1
Author: ABBDVD,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:31:52