Algorytm JavaScript do określania orientacji tabletu

Question

Budujemy aplikację HTML5/JavaScript opracowaną dla tabletów, a my chcemy inaczej przedstawić moje ekrany w układzie poziomym a pionowym.

Pierwotnie przechwytywaliśmy powiadomienia o zmianie orientacji i śledziliśmy aktualną orientację (ogólnie zgłaszane jako 0, 90, -90 lub 180 stopni - patrz this question). Niestety, różne urządzenia zgłaszają different orientations as "0". Odnośnik ten argumentuje, że jest to błąd, ale istnieją pewne dowody na to, że działa on zgodnie z projektem - na przykład, this article sugeruje, że domyślną orientacją jest "pejzaż", a te urządzenia zgłaszają orientację "0" w trybie poziomym .

Następnie próbowaliśmy po prostu spojrzeć na rzeczywisty rozmiar ekranu, zakładając, że gdy szerokość była większa niż wysokość, byliśmy w trybie poziomym. Ale ten algorytm jest zdezorientowany, gdy wyświetlana jest klawiatura ekranowa - gdy wyświetlana jest klawiatura, zwracane są wymiary widocznego obszaru. Kiedy urządzenie jest ściśle rzecz biorąc, w trybie portretowym, ale część ekranu nie zasłonięta przez klawiaturę jest szersza niż jest wysoka.

Odpowiedź na this question jest dość stara. Czy to nadal najlepsza odpowiedź? Czy ktoś ma dobry algorytm, który bierze pod uwagę widoczność klawiatury?

Answer 1

http://jsfiddle.net/jjc39/

Spróbuj tego:

<span id="orientation">orientation</span>​ 

$(document).ready(checkOrientation); 
$(window).resize(checkOrientation); 

function checkOrientation() { 
    var orientation = "Portrait"; 
    var screenWidth = $(window).width(); 
    var screenHeight = $(window).height(); 
    if (screenWidth > screenHeight) { 
     orientation = "Landscape"; 
    } 
    $("#orientation").html(orientation); 
}​