鍍金池/ 問答/HTML/ 移動端頁面跳轉為什么會放大

移動端頁面跳轉為什么會放大

移動端適配,正常打開頁面沒問題,但是頁面跳轉的時候會放大,就是雙擊的效果,但是我在mate標簽里面已經禁止放大了,沒有效果,同時還用了媒體查詢。
下面是關于適配的代碼。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">   
<meta name="applicable-device" content="pc,mobile">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="format-detection" content="telephone=no,address=no,email=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

js部分:

<script type="text/javascript">
    var match,
     scale,
    TARGET_WIDTH = 320;
    if (match = navigator.userAgent.match(/Android (\d+\.\d+)/)) {
    if (parseFloat(match[1]) < 4.4) {
      if (TARGET_WIDTH == 320) TARGET_WIDTH++;
    var scale = window.screen.width / TARGET_WIDTH;
    document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=' + TARGET_WIDTH + ', initial-scale = ' + scale + ', target-densitydpi=device-dpi');
       }
    } else {
     document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=' + TARGET_WIDTH);
    }
</script>

css部分:

@media only screen and (min-device-width : 320px) and (max-device-width : 568px){
    /*5*/
    .bg-img {
        height: 784px;
    }
    #btn b,#btn i{
        top: -79px;
        left: 175px;
    }
    .music-over a img{
        top: -137px;
        left: 298px;
    }
    .monkey{
        bottom: 53px;
        left: 167px;
    }
    .pig{
        bottom: 48px;
        left: 433px;
    }
}
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){
    /*蘋果6*/
    
    #btn b,#btn i{
        top: -79px;
        left: 175px;
    }
    .music-over a img{
        top: -137px;
        left: 298px;
    }
    .monkey{
        bottom: 17px;
        left: 167px;
    }
    .pig{
        bottom: 18px;
        left: 433px;
    }
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px){
    /*ipad*/
    
    #btn b,#btn i{
        top: -79px;
        left: 175px;
    }
    .music-over a img{
        top: -137px;
        left: 298px;
    }
    .pig{
        bottom:42px;
        left: 388px;
    }   
    .monkey{
        bottom:46px;
        left: 7px;
    } 
    .bg-img {
        height: 1017px;
    }
    .fish-one{
        top:366px;
    }
    .fish-two{
        top:551px;
    }
    .fish-three{
        top:528px;
    }
    .fish-four{
        top:401px;
    }
    .fish-five{
        top:492px;
    }
    
}
回答
編輯回答
茍活

不建議動態(tài)更改 viewport的寬來做屏幕適配,這樣會有很多隱患,和疑難雜癥,而且容易出現模糊情況,推薦使用使用 device-width ,使用媒體查詢等方式做機型適配

2017年1月28日 04:38
編輯回答
遲月

最后更新的 viewport 才會有效果,所以 js 設置的時候要加 user-scalable=no

2017年7月30日 06:56