关于移动端一像素问题，网上有很多文章给予了解决，在此我只说我一般采用的方法
首先也说明一下造成边框变粗的原因：
因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。
devicePixelRatio的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。
1、伪元素解决
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Document</title>
<style type="text/css">
.scale-1px{
position: relative;
margin-bottom: 20px;
display: inline-block;
margin: 0 auto;
width: 100px;
height: 30px;
border:none;
}
.scale-1px:after{
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 30px;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
.scale-none{
display: inline-block;
margin: 0 auto;
width: 100px;
height: 30px;
border-radius: 30px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class="scale-1px"></div>
<div class="scale-none"></div>
</body>
</html>
2、查询devicePixelRatio 改变缩放比例
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Document</title>
<style type="text/css">
.scale-none{
display: inline-block;
margin: 0 auto;
width: 100px;
height: 30px;
border-radius: 30px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class="scale-none"></div>
</body>
<script type="text/javascript">
var viewport = document.querySelector("meta[name=viewport]");
//下面是根据设备像素设置viewport
if (window.devicePixelRatio == 1) {
viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');
}
if (window.devicePixelRatio == 2) {
viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');
}
if (window.devicePixelRatio == 3) {
viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');
}
</script>
</html>
