返回列表

rem结合dpr及viewport2

默认分类 2017/11/03 01:08

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="files/m.css"> -->
</head>

<body>
  <script>
  (function() {
    var metaEl = document.querySelector('meta[name="viewport"]')
    var flexibleEl = document.querySelector('meta[name="flexible"]')
    var dpr = 0
    var scale = 0
    var tid

    if (metaEl) {
      window.console.warn('将根据已有的meta标签来设置缩放比例')
      var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/)
      if (match) {
        scale = parseFloat(match[1])
        dpr = parseInt(1 / scale)
      }
    } else if (flexibleEl) {
      var content = flexibleEl.getAttribute('content')
      if (content) {
        var initialDpr = content.match(/initial\-dpr=([\d\.]+)/)
        var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/)
        if (initialDpr) {
          dpr = parseFloat(initialDpr[1])
          scale = parseFloat((1 / dpr).toFixed(2))
        }
        if (maximumDpr) {
          dpr = parseFloat(maximumDpr[1])
          scale = parseFloat((1 / dpr).toFixed(2))
        }
      }
    }

    if (!dpr && !scale) {
      var isAndroid = window.navigator.appVersion.match(/android/gi)
      var isIPhone = window.navigator.appVersion.match(/iphone/gi)
      var devicePixelRatio = window.devicePixelRatio
      if (isIPhone) {
        // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
          dpr = 3
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
          dpr = 2
        } else {
          dpr = 1
        }
      } else {
        // 其他设备下,仍旧使用1倍的方案
        dpr = 1
      }
      scale = 1 / dpr
    }

    document.documentElement.setAttribute('data-dpr', dpr)
    document.documentElement.className = (document.documentElement.className ? ' ' : '') + ('dpr' + dpr)
    if (!metaEl) {
      metaEl = document.createElement('meta')
      metaEl.setAttribute('name', 'viewport')
      metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')
      if (document.documentElement.firstElementChild) {
        document.documentElement.firstElementChild.appendChild(metaEl)
      } else {
        var wrap = document.createElement('div')
        wrap.appendChild(metaEl)
        document.write(wrap.innerHTML)
      }
    }

    function refreshRem() {
      var width = document.documentElement.getBoundingClientRect().width
      if (width / dpr > 750) {
        width = 750 * dpr
      }
      var rem = width / 10
      document.documentElement.style.fontSize = rem + 'px'
    }

    window.addEventListener('resize', function() {
      window.clearTimeout(tid)
      tid = window.setTimeout(refreshRem, 300)
    }, false)
    window.addEventListener('pageshow', function(e) {
      if (e.persisted) {
        window.clearTimeout(tid)
        tid = window.setTimeout(refreshRem, 300)
      }
    }, false)

    if (document.readyState === 'complete') {
      document.body.style.fontSize = 12 * dpr + 'px'
    } else {
      document.addEventListener('DOMContentLoaded', function(e) {
        document.body.style.fontSize = 12 * dpr + 'px'
      }, false)
    }

    refreshRem()
  })()
  </script>
  <script>
  document.body.style.fontSize = document.documentElement.getAttribute('data-dpr') * 12 + 'px'
  </script>
  <style>
    *{box-sizing:border-box;margin:0px;padding:0px;border:0px;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;vertical-align:baseline;}
    input[type="button"],input[type="number"],input[type="password"],input[type="submit"],input[type="text"],textarea{border:0px;font-family:inherit;font-weight:inherit;resize:none;outline:0px;box-shadow:none;-webkit-appearance:none;}
    a{color:rgb(51,51,51);text-decoration:none;}
    a,button,img,input,span,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);outline:0px;}
    body,html{width:100%;height:100%;}
    body{line-height:1.5;font-family:Arial,Roboto,"Droid Sans","Hiragino Sans GB",STXihei,sans-serif;color:rgb(0,0,0);user-select:none;-webkit-tap-highlight-color:transparent;}
    a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}

    .login-wrapper{height:100%;background-color:rgb(241,241,241);}
    .login-wrapper .title-bar{height:1.17333rem;line-height:1.17333rem;color:rgb(100,100,100);text-align:center;background-color:rgb(255,255,255);position:relative;}
    .login-wrapper .title-bar .back{display:block;position:absolute;width:0.266667rem;height:0.266667rem;border-width:2px;border-style:solid;border-color:rgb(155,155,155) rgb(155,155,155) transparent transparent;transform:translate(0px,-50%) rotate(-135deg);top:50%;left:0.346667rem;}
    .login-wrapper .login{width:7.57333rem;margin:auto;padding-top:0.773333rem;}
    .login-wrapper .login input{width:100%;height:1.01333rem;line-height:0.48rem;padding:0.266667rem 0px 0.266667rem 0.266667rem;border:0px;}
    .login-wrapper .login input::-webkit-input-placeholder{color:rgb(206,206,206);}
    .login-wrapper .login input::placeholder{color:rgb(206,206,206);}
    .login-wrapper .login .submit{width:7.57333rem;height:1.01333rem;line-height:1.01333rem;text-align:center;padding:0px;border-style:none;border-radius:0.08rem;background-color:rgb(204,51,51);color:rgb(255,255,255);}
    .login-wrapper .login .other-select{margin-top:0.266667rem;}
    .login-wrapper .login .other-select a{color:rgb(155,155,155);text-decoration:underline;}
    .login-wrapper .login .other-select .signup{float:left;}
    .login-wrapper .login .other-select .forget-password{float:right;}

    .dpr1 .login-wrapper .title-bar {font-size: 17px;}
    .dpr2 .login-wrapper .title-bar {font-size: 34px;}
    .dpr3 .login-wrapper .title-bar {font-size: 51px;}

    .dpr1 .login-wrapper .login .submit {font-size: 14px;}
    .dpr2 .login-wrapper .login .submit {font-size: 28px;}
    .dpr3 .login-wrapper .login .submit {font-size: 42px;}
  </style>
  <div class="login-wrapper">
    <div class="title-bar">
      <span class="back"></span>示例
    </div>
    <div class="login">
      <fieldset>
        <input type="submit" value="提交" class="submit" id="submit">
        <div class="other-select">
          <a class="signup" href="#">示例1</a>
          <a class="forget-password" href="#">下载app找回密码</a>
        </div>
      </fieldset>
    </div>

  </div>
</body>

</html>

Demo: http://haiyang.me/other/rem.html