Javascript doOnOrientationChange: не могу исправить ошибку при загрузке страницы

Я использовал .js, чтобы избежать альбомной ориентации с мобильного устройства. Я отредактировал белое полноэкранное изображение с надписью «Считается, что этот сайт не просматривается в ландшафтном режиме, пожалуйста, переверните ваше устройство», чтобы оно показывалось каждый раз, когда я поворачиваю свое устройство из портретного режима в ландшафтный. Это работает, за исключением случаев, когда я загружаю страницу и уже нахожусь в ландшафтном режиме. Любая идея о том, как это исправить? Спасибо

<script>
(function() {
    'use strict';

    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());
        }
    };
    if (isMobile.any()) {
        doOnOrientationChange();
        window.addEventListener('resize', doOnOrientationChange, 'false');
    }

    function doOnOrientationChange() {
        var a = document.getElementById('alert');
        var b = document.body;
        var w = b.offsetWidth;
        var h = b.offsetHeight;
        (w / h > 1) ? (a.className = 'show', b.className = 'full-body') : (a.className = 'hide', b.className = '');
    }
})();
</script>

Обновление:

Я пытался добавить в скрипт window.orientation, но что-то пошло не так.

if (orientation === "landscape-primary") {
    doOnOrientationChange();
    window.addEventListener('resize',doOnOrientationChange,'false');
}

window.onload(doOnOrientationChange());

person Luigi    schedule 31.05.2015    source источник
comment
Как насчет вызова скрипта onload?   -  person koljanep    schedule 01.06.2015
comment
звучит хорошо! но я не знаю, как это сделать!   -  person Luigi    schedule 01.06.2015
comment
извините, я не могу добавить этот скрипт, куда мне его добавить в коде? Однако спасибо за ответ!   -  person Luigi    schedule 01.06.2015
comment
загляните в window.orientation developer.mozilla.org/en-US/docs /Web/API/Screen/orientation, если это значение изначально горизонтальное, вызовите свой метод doOnOrientationChange()   -  person mpallansch    schedule 01.06.2015
comment
Спасибо, я пытался, но безуспешно. Я собираюсь опубликовать код, который я пробовал в вопросе   -  person Luigi    schedule 01.06.2015
comment
Как насчет window.onload(doOnOrientationChange()); вне вашей функции   -  person koljanep    schedule 01.06.2015
comment
Спасибо, я пытался добавить window.onload(doOnOrientationChange()); (я загрузил вопрос с этой строкой), но это все равно не работает! @ koljanep   -  person Luigi    schedule 01.06.2015


Ответы (1)


Вам нужно переместить функцию doOnOrientationChange() за пределы другой, а затем вызвать ее при загрузке страницы. Вот так должно работать:

<script>
function checkMobile() {
    var isMobile = false;
    if (navigator.userAgent.match(/Android/i)
     || navigator.userAgent.match(/BlackBerry/i)
     || navigator.userAgent.match(/iPhone|iPad|iPod/i)
     || navigator.userAgent.match(/Opera Mini/i)
     || navigator.userAgent.match(/IEMobile/i)) {
            isMobile = true;
        }
    return isMobile;
}
function doOnOrientationChange() {
    var a = document.getElementById('alert');
    var b = document.body;
    var w = b.offsetWidth;
    var h = b.offsetHeight;
    if (checkMobile()) {
        (w / h > 1) ? (a.className = 'show', b.className = 'full-body') : (a.className = 'hide', b.className = '');
    } else {
        a.className = 'hide';
        b.className = '';
    }
}
window.onload = doOnOrientationChange();
window.addEventListener('resize', doOnOrientationChange, 'false');
</script>
person koljanep    schedule 02.06.2015
comment
Большое спасибо @koljanep. Я попробовал предложенный вами код, но произошло что-то странное. Я думаю, это связано с тем, что я использую FullPage.js, и это мешает. С помощью этого кода я не могу прокручивать страницы в мобильном представлении, и я не вижу сайт ни с компьютера, потому что появляется белая полная страница, говорящая, что этот сайт не предназначен для просмотра в ландшафтном режиме, пожалуйста, переверните ваше устройство. . - person Luigi; 03.06.2015
comment
Есть ли кто-нибудь, кто может мне помочь? - person Luigi; 05.06.2015
comment
@Luigi, что теперь происходит с этим скриптом? Вы говорите, что это не работает. Это что-то делает? - person koljanep; 05.06.2015
comment
заставка с белым предупреждением (вставленная с HTML <div id="alert" class="hide"> <div id="content">Qhis site is not thought to be viewed in landscape mode, please turn your device </div> </div>) больше не появляется, ни переключение устройства из портретной ориентации в альбомную, ни загрузка страницы в альбомной ориентации - person Luigi; 05.06.2015
comment
@Luigi Я еще раз отредактировал свой ответ. У меня было больше времени, поэтому я протестировал его, и он работает. Дай мне знать - person koljanep; 05.06.2015
comment
@Luigi, куда ты положил свой код js? в шапке или в теле? - person koljanep; 06.06.2015
comment
@kiljanep в конце тела - person Luigi; 06.06.2015