移动端网页开发中viewport的用法

通过js进行处理,可以更好的实现多终端下的viewport设置.

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

 

来源:https://blog.csdn.net/wxl1555/article/details/80198559