JS检测移动端横竖屏

屏幕旋转到横屏之后,页面显示错乱,最后整理了一下,原理就是通过resize检测屏幕宽度是否发生变化,如果发生变化就重新渲染页面,代码如下:。

 !(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            if(width>640){//如果页面宽度大于640,把width设置成640
                width=640;
            }
            //初始化页面字体 1rem = 10px
            width && (docEle.style.fontSize = width/10 + "px");
        };
    win.addEventListener(evt,fn, false);//监听window
    doc.addEventListener("DOMContentLoaded", fn, false);//监听document
}(document, window));

有些时候旋转屏幕会出现,fn方法在旋转屏幕的过程中执行完毕,导致页面在旋转的过程已经渲染完毕,这时候可以在监听事件的时候,延迟调用fn方法,使用setTimeout这个方法。

win.addEventListener(evt, function(){
    fn();
    setTimeout(fn,50);
}, false);
doc.addEventListener("DOMContentLoaded", function(){
    fn();
    setTimeout(fn,50);
}, false);

延时大小根据情况自己调就行了。
完整的代码如下:

!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            if(width>640){
                width=640;
            }
            width && (docEle.style.fontSize = width/10 + "px");
        };
    win.addEventListener(evt, function(){
        fn();
        setTimeout(fn,50);
    }, false);
    doc.addEventListener("DOMContentLoaded", function(){
        fn();
        setTimeout(fn,50);
    }, false);
}(document, window));

转载请注明出处!

查看微博长图