<!doctype html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>1px 适配方案</title>
</head>
<body>
<div style=" 8rem;height: 8rem;border: 1px solid #000000; !important;">
当设置了边框为1px的时候，在移动端屏幕上映射到物理像素就有2个（x轴或Y轴）或者4（一个点的时候4个物理像素）宽度
</div>
<script>
//获取当前设备的物理像素和css像素比例
var dpr = window.devicePixelRatio;
//将像素比例除1（缩小一倍）
var scale = 1/dpr;
//获取mate表桥
var metaNode = document.querySelector("meta[name='viewport']");
//修改content内容
var content = "width=device-width, user-scalable=no, initial-scale="+scale+", maximum-scale="+scale+", minimum-scale="+scale;
//设置content内容
metaNode.setAttribute('content',content);
//获取当前设备的宽度
var width = document.documentElement.clientWidth;
//获取html标签对象
var styleNode = document.querySelector('html');
//设html的font-size
styleNode.style.fontSize = width/16+'px';
</script>
</body>
</html>