移动端页面跳转为什么会放大

Question

移动端适配，正常打开页面没问题，但是页面跳转的时候会放大，就是双击的效果，但是我在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;
    }
    
}

Answer 1

最后更新的 viewport 才会有效果,所以 js 设置的时候要加 user-scalable=no

Answer 2

不建议动态更改 viewport的宽来做屏幕适配，这样会有很多隐患，和疑难杂症，而且容易出现模糊情况，推荐使用使用 device-width ，使用媒体查询等方式做机型适配