Jak wykrywać orientację urządzenia za pomocą JavaScript?

Question

Widziałem wiele sposobów na wykrycie orientacji ekranu urządzenia, w tym użycie testu do sprawdzenia wewnętrznej szerokości w porównaniu z wewnętrzną wysokością, tak jak w przypadku.

function getOrientation(){ 
    var orientation = window.innerWidth > window.innerHeight ? "Landscape" : "Primary"; 
    return orientation; 
} 

Ale co, jeśli chcę, aby sprawdzić zmienia w orientacji ekranu, jak również za pomocą detektora zdarzeń? Próbowałem tego kodu, ale to nie działa dla mnie.

function doOnOrientationChange() 
    { 
    switch(window.orientation) 
    { 
     case -90: 
     case 90: 
     alert('landscape'); 
     break; 
     default: 
     alert('portrait'); 
     break; 
    } 
    } 

    window.addEventListener('orientationchange', doOnOrientationChange); 

    // Initial execution if needed 
    doOnOrientationChange(); 

Nie wykrywa orientacji urządzenia, a słuchacz nie rejestruje się dla mnie (używam emulatora urządzenia Chrome).

Answer 1

dwa sposoby, aby to zrobić:

Po pierwsze, zgodnie z dokumentacją Screen API, używając> = Chrome 38, Firefox i IE 11, obiekt Ekran jest dostępny nie tylko zobaczyć orientację, ale także zarejestrować słuchacza za każdym razem, gdy zmienia się orientacja urządzenia.

screen.orientation.type będzie wyraźnie poinformować, co orientacja jest i dla słuchacza można użyć coś prostego, jak:

screen.orientation.onchange = function(){ 
    // logs 'portrait' or 'landscape' 
    console.log(screen.orientation.type.match(/\w+/)[0]); 
}; 

Po drugie, dla kompatybilności z innych przeglądarek, takich jak Safari, które nie są zgodne z ekranem, this post pokazuje, że możesz dalej używać innerWidth i innerHeight do zmiany rozmiaru okna.

function getOrientation(){ 
    var orientation = window.innerWidth > window.innerHeight ? "Landscape" : "Portrait"; 
    return orientation; 
} 

window.onresize = function(){ getOrientation(); }