JS 控制VIEWPORT属性，在不同终端类型中兼容自适应显示

首先你要设置meta viewport属性。

<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi, user-scalable=yes">

然后再JS代码中设置如下代码

var viewport = document.querySelector("meta[name=viewport]");
var winWidths=$(window).width();
var densityDpi=640/winWidths;
	densityDpi= densityDpi>1?300*640*densityDpi/640:densityDpi;
if(isWeixin()){
	viewport.setAttribute('content', 'width=640, target-densityDpi='+densityDpi);
}else{
	viewport.setAttribute('content', 'width=640, user-scalable=no');
	window.setTimeout(function(){
		viewport.setAttribute('content', 'width=640, user-scalable=yes');
	},1000);
}
function isWeixin(){
	var ua = navigator.userAgent.toLowerCase();
	if(ua.match(/MicroMessenger/i)=="micromessenger") {
		return true;
	} else {
		return false;
	}
}

以下是判断浏览器类型后，通过js设置meta viewport属性的实例，在不同设备终端兼容性显示自适应页面

	//获取并判断客户端类型   
    function iswhichwapdev(){  
        var viewport = document.querySelector("meta[name=viewport]");//获取meta对象的第一种方法
<code class="html spaces"></code><code class="html plain">        //var viewport = document.getElementsByTagName('meta')[1]; </code>//获取meta对象的第二种方法
        var agentcheck=navigator.userAgent.toLowerCase();    
        var isAndroid=true;   
        var isIPone=false;  
        var keywords = ["mobile", "android",  
                            "symbianos", "windows phone",  
                            "mqqbrowser", "nokia", "samsung", "midp-2",  
                            "untrusted/1.0", "windows ce", "blackberry","ucweb",  
                            "brew", "j2me", "yulong", "coolpad", "tianyu", "ty-",  
                            "k-touch", "haier", "dopod", "lenovo", "huaqin", "aigo-",  
                            "ctc/1.0", "ctc/2.0", "cmcc", "daxian", "mot-",  
                            "sonyericsson", "gionee", "htc", "zte", "huawei", "webos",  
                            "gobrowser", "iemobile", "wap2.0","wapi","ipad","ipod"];  
        //判断是否是iphone;    
        var rekeywords=["iphone"];  
        if (agentcheck!=null){  
            for (var i = 0; i < rekeywords.length; i++) {  
                if ( agentcheck.indexOf(rekeywords[i].toLowerCase())>-1){  
                isAndroid=false;
                isIPone=true;
                }  
            }  
        }  
      
        if (isAndroid){  
                    for (var i = 0; i < keywords.length; i++) {  
                        if ( agentcheck.indexOf(keywords[i].toLowerCase())>-1) {  
                    viewport.setAttribute('content',  'width=772px,target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=yes');
                        }  
                    }  
        }  
        if (isIPone) {             
                    viewport.setAttribute('content', 'width=772px,target-densitydpi=device-dpi, initial-scale=0.4, minimum-scale=0.4, maximum-scale=2.0, user-scalable=yes');
                }  
          
    }