移动端横屏返回后无法恢复原来大小解决方案

横屏弹出提示后，返回竖屏的时候，显示页面被放的特别大，需双击页面空白处才能恢复。

假如移动端页面是这样的头部声明：







<head>
        <meta charset="utf-8">
        <title>《刀剑斗神传》-国风江湖 动作手游</title>
        <meta name="Keywords" content="" />
        <meta name="Description" content="" />
        <meta name="viewport" content="width=640,minimum-scale=0,maximum-scale=5,user-scalable=no"/>    
</head>




 


 


解决方法为：


假如判断横竖屏是这样处理的




//横竖屏判断
function hengshuping() {
    if (window.orientation == 180 || window.orientation == 0) {
        $(".horizontal").hide();
    }
    if (window.orientation == 90 || window.orientation == -90) {
        $(".horizontal").show();
    }
}

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);




解决方法为为：


切换到竖屏后，隔1秒，执行设置viewport属性值：




//横竖屏判断
function hengshuping() {
    if (window.orientation == 180 || window.orientation == 0) {
        $(".horizontal").hide();
        setTimeout(function(){
            $("meta[name=viewport]").attr("content",'width=639,minimum-scale=0,maximum-scale=1,user-scalable=no');
            $("meta[name=viewport]").attr("content",'width=640,minimum-scale=0,maximum-scale=1,user-scalable=no');
        },1000)
    }
    if (window.orientation == 90 || window.orientation == -90) {
        $(".horizontal").show();
    }
}




 







        

        

            posted on 
2017-09-29 14:34 
靖儿 
阅读(702) 
评论(0) 
编辑 
收藏 
举报

        

    










    
    

    
    

    

        

    

        

            
                
                
            
        

    

        

            
                
            
        

    

    

    





            

        

        

            

导航