移动端1像素问题-CFANZ编程社区

关于移动端一像素问题，网上有很多文章给予了解决，在此我只说我一般采用的方法

首先也说明一下造成边框变粗的原因：

因为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>