移動端橫屏返回後沒法恢復原來大小解決方案

時間 2019-12-06

標籤移動返回沒法恢復原來大小解決方案欄目無線简体版

原文原文鏈接

橫屏彈出提示後，返回豎屏的時候，顯示頁面被放的特別大，需雙擊頁面空白處才能恢復。ide

假如移動端頁面是這樣的頭部聲明：spa

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

解決方法爲：scala

假如判斷橫豎屏是這樣處理的code

//橫豎屏判斷
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);

解決方法爲爲：blog

切換到豎屏後，隔1秒，執行設置viewport屬性值：ip

//橫豎屏判斷
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();
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。