移动端缩放响应式布局

2017-08-21

移动端缩放响应式布局是一些简单的h5页面应用的
原理就是根据屏幕的尺寸通过js缩放

<script type="text/javascript">
  var isAndroid = false;
  function addViewPort() {
    var phoneWidth = parseInt(window.screen.width),
        phoneScale = phoneWidth / 750,
        ua = navigator.userAgent;
    if (/Android (\d+\.\d+)/.test(ua)) {
      isAndroid = true;
      var version = parseFloat(RegExp.$1);
      // andriod 2.3
      if (version > 2.3) {
        document.write('<meta name="viewport" content="width=750, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
        // andriod 2.3以上
      } else {
        document.write('<meta name="viewport" content="width=750, target-densitydpi=device-dpi">');
      }
      // 其他系统
    } else {
      document.write('<meta name="viewport" content="width=750, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
    }
  }
  addViewPort();
</script>