一般檢查移動設備的屏幕方向是否有變化？

Question

我有一個網站，該網站會根據移動設備的方向是縱向還是橫向來更改顯示的內容。 我目前發現的是我有時可以使用的當前代碼，但是在隨機設備上，它將無法按預期運行。 設備的方向將翻轉，因此我要在potrait上顯示的頁面在橫向顯示，反之亦然。 這是我正在使用的代碼，該代碼可在所有Android設備上使用，但可在某些iOS設備上使用，而不能在其他iOS設備上使用。

// determines device type for orientation
                var isMobile = {
                        Android: function() {
                                return navigator.userAgent.match(/Android/i);
                        },
                        BlackBerry: function() {
                                return navigator.userAgent.match(/BlackBerry/i);
                        },
                        iOS: function() {
                                return navigator.userAgent.match(/iPhone|iPad|iPod/i);
                        },
                        Opera: function() {
                                return navigator.userAgent.match(/Opera Mini/i);
                        },
                        Windows: function() {
                                return navigator.userAgent.match(/IEMobile/i);
                        },
                        any: function() {
                                return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
                        }
                };


 window.addEventListener("orientationchange", function() {
        // if it is an iPhone, swap screen orientation doing this
                 if(isMobile.iOS()){
                        if (window.matchMedia("(orientation: portrait)").matches) {
                                // you're in PORTRAIT mode
                potraitBody.classList.add("hideThisDiv");
                                landscapeBody.classList.remove("hideThisDiv");
                        }

                        if (window.matchMedia("(orientation: landscape)").matches) {
                                // you're in LANDSCAPE mode
                potraitBody.classList.remove("hideThisDiv");
                                landscapeBody.classList.add("hideThisDiv");
                        }
                }
                // if it is on Android swap screen orientation doing this
                if(isMobile.Android()) {
                        if(screen.orientation.angle == 0)
                        {
                                // portrait
                potraitBody.classList.remove("hideThisDiv");
                                landscapeBody.classList.add("hideThisDiv");
                        }
                        else
                        {
                                // landscape
                potraitBody.classList.add("hideThisDiv");
                                landscapeBody.classList.remove("hideThisDiv");
                        }
                }
                }, false);

解決此問題的第一個解決方案是將監聽器用於oreintationchange，然后簡單地檢查方向是否為0（縱向）或不為0（橫向）。 在某些iOS設備和所有Android設備上均可使用。 然后，我添加了針對iOS設備的特定檢查，認為它們都以相同的方式定向，但是在iPhone 10上進行檢查時，我的代碼有效，但是在iPhone 7或iPad Pro 2017型號上卻沒有。 是否有解決方案可在所有移動設備上正確檢查方向？ 我並不是真的想搜尋所有可能會使用我的網站來專門針對它的設備。

謝謝！

編輯：

如果我的問題不夠具體，我正在尋找一種方法來測試任何移動設備是否處於橫向或縱向模式。 如果可能的話，我不希望逐個模型地進行案例分析，但是逐個操作系統是可以的。 我認為有一種通用的方法可以檢查手機上的屏幕方向。

Answer 1

如果有人遇到這個問題，這是我發現對我有用的解決方案。

var handleOrientationChange = (function() {
    var struct = function(){
        struct.parse();
    };
    struct.showPortraitView = function(){
         potraitBody.classList.remove("hideThisDiv");
         landscapeBody.classList.add("hideThisDiv");
    };
    struct.showLandscapeView = function(){
         potraitBody.classList.add("hideThisDiv");
         landscapeBody.classList.remove("hideThisDiv"); 
    };
    struct.parse = function(){
        switch(window.orientation){
            case 0:
                    //Portrait Orientation
                    this.showPortraitView();
                break;
            default:
                  // Landscape Orientation
                   this.lastOrientation = window.orientation;
                   this.showLandscapeView();
                break;
        }
    };
    struct.lastOrientation = window.orientation;
    return struct;
})();

適用於iPad，Galaxy s9 +，iPhone 7，iPhone 10和iPhone SE。 尚未在其他設備上對其進行過測試，但我認為它應該可以在任何地方使用。