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

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

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


<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();
    }
}
原文地址:https://www.cnblogs.com/zhidong123/p/7610899.html