Cách phát hiện định hướng thiết bị bằng JavaScript?

Question

Tôi đã nhìn thấy một số cách để phát hiện hướng màn hình của thiết bị, bao gồm sử dụng một kiểm tra để kiểm tra innerWidth so với innerHeight, như vậy.

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

Nhưng nếu tôi muốn kiểm tra cho thay đổi trong hướng màn hình cũng như với một người biết lắng nghe sự kiện? Tôi đã thử mã này nhưng nó không làm việc cho tôi.

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(); 

Nó không phát hiện hướng thiết bị và người nghe không đăng ký cho tôi (Tôi đang sử dụng trình mô phỏng thiết bị của Chrome).

Answer 1

Hai cách để làm điều này:

Thứ nhất, theo các tài liệu Screen API, sử dụng> = Chrome 38, Firefox và IE 11, đối tượng màn hình có sẵn để không chỉ xem các định hướng, mà còn để đăng ký người nghe mỗi lần định hướng thiết bị thay đổi.

screen.orientation.type rõ ràng sẽ cho bạn biết những gì định hướng là, và cho người nghe, bạn có thể sử dụng một cái gì đó đơn giản như:

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

Thứ hai, để tương thích với các trình duyệt khác như Safari mà không tương thích với màn hình, this post cho thấy rằng bạn có thể tiếp tục sử dụng innerWidth và innerHeight khi thay đổi kích thước cửa sổ.

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

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