一般检查移动设备的屏幕方向是否有变化？

Question

I have a website that will change what is shown depending on if the mobile device's orientation is either portrait or landscape. What I am currently finding is the current code I have works sometimes, but on random devices, it will not work as intended. The orientation of the device will be flipped, so the page I want to show on potrait is shown on landscape and vice versa. Here is the code I am using that works on all Android devices, but will work on some iOS devices while not working on others.

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

My first solution to solving this issue was using the listener for oreintationchange, then simply checking if the orientation was 0 (portrait) or not 0 (landscape). This work on some iOS devices and all Android devices. I then added the specific check for iOS devices thinking that they all were oriented the same way, but when checking on an iPhone 10, my code works, but on an iPhone 7 or iPad Pro 2017 model, it does not. Is there a solution to check orientation correctly on all mobile devices? I do not really want to hunt down every device might use my site to accomidate for it specfically.

Thanks!

Edit:

If my question is not specific enough, I am looking for a method to test if any mobile device is in either landscape or potrait mode. If possible I would not like to go through and make cases model by model, but OS by OS is fine. I would think there is a universal way to check screen orientation on mobile.

Answer 1

Here is the solution I found that worked for me if anyone else has this question.

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

Worked on an iPad, Galaxy s9+, iPhone 7, iPhone 10 and iPhone SE. Haven't tested it on other devices but I believe it should work everywhere.