關(guān)于移動(dòng)端一像素問題，網(wǎng)上有很多文章給予了解決蜡歹，在此我只說我一般采用的方法
首先也說明一下造成邊框變粗的原因：
因?yàn)閏ss中的1px并不等于移動(dòng)設(shè)備的1px真友，這些由于不同的手機(jī)有不同的像素密度。在window對(duì)象中有一個(gè)devicePixelRatio屬性富寿，他可以反應(yīng)css中的像素與設(shè)備的像素比睬隶。
devicePixelRatio的官方的定義為：設(shè)備物理像素和設(shè)備獨(dú)立像素的比例，也就是 devicePixelRatio = 物理像素 / 獨(dú)立像素作喘。
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]");
//下面是根據(jù)設(shè)備像素設(shè)置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>
