H5-viewport用法，阻止微信浏览器自带的双击放大和任意放大缩小

<meta name="viewport" content="width=100%,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">

 页面统一加入

移动端布局实例：

<head>
<title>Test Page</title>
<script>
    var deviceWidth = parseInt(window.screen.width);  //获取当前设备的屏幕宽度
    var deviceScale = deviceWidth / 640;  //得到当前设备屏幕与640之间的比例，之后我们就可以将网页宽度固定为640px
    var ua = navigator.userAgent;
    //获取当前设备类型（安卓或苹果）
    if (/Android (\d+\.\d+)/.test(ua)) {
        var version = parseFloat(RegExp.$1);
        if (version > 2.3) {
            document.write('<meta name="viewport" content="width=640,initial-scale=' + deviceScale + ', minimum-scale = ' + deviceScale + ', maximum-scale = ' + deviceScale + ', target-densitydpi=device-dpi">');
        } else {
            document.write('<meta name="viewport" content="width=640,initial-scale=0.75,maximum-scale=0.75,minimum-scale=0.75,target-densitydpi=device-dpi" />');
        }
    } else {
        document.write('<meta name="viewport" content="width=640, user-scalable=no">');
    }
</script>
</head>

 

posted @ 2018-06-14 10:57  九三x  阅读(806)  评论(0)  编辑  收藏  举报