移动端页面适配 - viewport篇

    <meta name="viewport" id="viewport"

      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<!-- 设置默认viewport属性为：设备宽度，初始化缩放为正常大小，最大缩放为正常，不允许用户缩放 -->

<script type="text/javascript">

    var clientWidth = document.documentElement.clientWidth,

            viewport = null,

            viewportWidth = 'device-width',

            viewportScale = 1;

    if (clientWidth > 320) {

        viewport = document.getElementById('viewport');

        viewportScale = clientWidth / 320;

        viewportWidth = 320 * (320 / clientWidth);

        viewport.setAttribute('content', 'width=' + viewportWidth + ', initial-scale=' + viewportScale + ', maximum-scale=' + viewportScale + ', user-scalable=0');

    }

</script>

<!-- 默认页面宽度为320px, 如果设备宽度大于320px，则计算缩放比例，重新设置viewport属性值 -->

<meta name="format-detection" content="telephone=no,email=no,address=no"/>

<!-- 禁用默认手机号码及地址在手机浏览器中的默认点击效果，如：拨打电话等效果 -->