Javascript doOnOrientationChange:can'；无法修复加载页面时出现的错误

我使用了

.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>

---

您需要将

doOnOrientationChange（）

函数移到另一个函数之外，然后在pageload上调用它。像这样，它应该可以工作：

<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>

函数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；
}
返回isMobile；
}
函数doOnOrientationChange（）{
var a=document.getElementById（'alert'）；
var b=document.body；
var w=b.偏移网络宽度；
var h=b.离地远视；
if（checkMobile（））{
（w/h>1）？（a.className='show'，b.className='full body'）：（a.className='hide'，b.className=''；
}否则{
a、 className='hide'；
b、 类名=“”；
}
}
window.onload=doOnOrientationChange（）；
addEventListener（'resize'，doOnOrientationChange'，false'）；

调用脚本

onload

怎么样？听起来不错！但我不知道该怎么办！这应该会回答：对不起，我无法添加此脚本，我必须在代码中的什么位置添加它？不过，谢谢你的回答！查看

窗口。方向

如果此值最初为横向，请调用您的

doOnOrientationChange（）

方法非常感谢

@koljanep

。我尝试了你建议的代码，但奇怪的事情发生了。我想这是因为我使用的是FullPage.js，它会干扰。使用此代码，我无法在移动视图中滚动页面，也无法从计算机上看到该站点，因为出现了白色的完整页面，上面写着“此站点不被认为是以横向模式查看的，请打开您的设备”。有人能帮我吗？@Luigi此脚本现在发生了什么？你说它不起作用。它有什么作用吗？白色警报启动页（插入了HTML

Qhis站点不被认为是在横向模式下查看的，请打开您的设备

）不再显示，也不再从横向模式从纵向模式旋转设备，也不再在横向模式下加载页面view@Luigi我再次编辑了我的答案。我有更多的时间，所以我测试了它，并为它的工作。让我知道

<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>