<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{width:4.984rem;border: 1px solid #000;box-sizing: border-box;font-size: 18px}
</style>
</head>
<body>
<div class="box">
我是一段字体
</div>
<script type="text/javascript">
var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum - scale = ' + scale + ', user - scalable = no ');
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';//字体大小为设计宽度除以10
</script>
</body>
</html>