Общая проверка для любого изменения ориентации экрана мобильного устройства? - PullRequest
Новая
       26

Общая проверка для любого изменения ориентации экрана мобильного устройства?

0 голосов
/ 12 марта 2019

У меня есть веб-сайт, который будет изменять отображаемое изображение в зависимости от того, является ли ориентация мобильного устройства книжной или альбомной.То, что я сейчас нахожу, это текущий код, который у меня иногда работает, но на случайных устройствах он не будет работать так, как задумано.Ориентация устройства будет изменена, поэтому страница, которую я хочу показать на портрете, будет показана в альбомной ориентации и наоборот.Вот код, который я использую, который работает на всех устройствах 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 - нет.Есть ли решение для правильной проверки ориентации на всех мобильных устройствах?Я на самом деле не хочу выискивать каждое устройство, которое может использовать мой сайт специально для этого.

Спасибо!

Редактировать:

Если мой вопрос недостаточно конкретен, я ищу способ проверить, работает ли какое-либо мобильное устройство в горизонтальном или горизонтальном режиме.Если возможно, я бы не хотел проходить и делать случаи модели за моделью, но ОС за ОС хорошо.Я думаю, что есть универсальный способ проверить ориентацию экрана на мобильном телефоне.

1 Ответ

0 голосов
/ 14 марта 2019

Вот решение, которое я нашел, которое сработало для меня, если у кого-то еще есть этот вопрос. 

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. Не тестировал его на других устройствах, но я считаю, что он должен работать везде.

...