时间戳

首页 > 解决方案 > 一般检查任何移动设备屏幕方向的变化？

javascript - 一般检查任何移动设备屏幕方向的变化？

问题描述

我有一个网站，它将根据移动设备的方向是纵向还是横向来更改显示的内容。我目前发现的是我有时可以使用的当前代码，但在随机设备上，它不会按预期工作。设备的方向将被翻转，因此我想在纵向上显示的页面以横向显示，反之亦然。这是我正在使用的代码，它适用于所有 Android 设备，但可以在某些 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 型号上却没有。是否有解决方案可以在所有移动设备上正确检查方向？我真的不想追查每一个设备可能会使用我的网站来专门适应它。

谢谢！

编辑：

如果我的问题不够具体，我正在寻找一种方法来测试任何移动设备是否处于横向或纵向模式。如果可能的话，我不想逐个模型地制作案例，但是操作系统的操作系统很好。我认为有一种通用的方法可以检查移动设备上的屏幕方向。

标签： javascripthtmliosmobilescreen-orientation

解决方案

如果其他人有这个问题，这是我发现对我有用的解决方案。

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 上工作。尚未在其他设备上对其进行测试，但我相信它应该可以在任何地方使用。

推荐阅读