移动页面适配－viewport缩放

移动端适配方案1,  采用一个基准宽，对当前viewport进行缩放

相关代码如下：

<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <script type="text/javascript">
        var clientWidth = document.documentElement.clientWidth,
                viewport = null,
                viewportWidth = 'device-width',
                viewportScale = 1,
                normalWidth = 2048;
        if (clientWidth > normalWidth) {
            viewport = document.getElementById('viewport');
            viewportScale = clientWidth / normalWidth;
            viewportWidth = normalWidth * (normalWidth / clientWidth);
            viewport.setAttribute('content', 'width=' + viewportWidth + ', initial-scale=' + viewportScale + ', maximum-scale=' + viewportScale + ', user-scalable=0');
        }else if(clientWidth < normalWidth){
        	viewport = document.getElementById('viewport');
            viewportScale = clientWidth / normalWidth;
            viewportWidth = normalWidth * viewportScale;
            viewport.setAttribute('content', 'width=' + viewportWidth + ', initial-scale=' + viewportScale + ', maximum-scale=' + viewportScale + ', user-scalable=0');
        }
    </script>

 

来源：https://www.cnblogs.com/mjian/p/9250114.html