代码如下：
<!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