移动端Web如何画一条 0.5px 的线

在移动端Web开发中，我们有很多方法可以实现画一条0.5px的线。以下是一些典型的方法：

1. 使用 viewport

   可以将页面的视口设置为设备宽度的一般，然后布局以这个新的视口宽度为基准进行。当设置 border-width: 1px 时，其实际显示出来结果就是物理像素的0.5px。

   html
   <meta name="viewport" content="width=device-width,initial-scale=.5, maximum-scale=.5, user-scalable=no">
   <div style="border-bottom: 1px solid #ccc"></div>

2. 使用 CSS transform 属性

   这种方法通常适用于大部分场景，主要思路是添加一个 1px 的 border，然后通过 scaleY(.5)/scaleX(.5) 进行缩放。需要注意的是，在利用这种方法画线时，应该以伪元素进行缩放，避免影响容器本身的布局。

   html
   <div class="line"></div>

   css
   .line {
       position: relative;
       height: 20px;
   }
   
   .line::after {
       content: '';
       position: absolute;
       left: 0;
       bottom: 0;
       width: 100%;
       border-bottom: 1px solid #ccc;
       transform: scaleY(.5);
   }

3. 使用 SVG.

   SVG 是一种基于 XML 语法的图像格式，全部是由代码生成，所以可以精确到0.5px。具体实现就是改变SVG中的 stroke-width属性。

   html
   <svg width="100%" height="1" version="1.1" xmlns="http://www.w3.org/2000/svg">
       <line x1="0" y1="0" x2="375" y2="0" stroke="#000" stroke-width="0.5" />
   </svg>

4. 使用 Canvas

   canvas 的API为我们提供了更底层的画图能力，同样能实现这个需要。

   html
   <canvas id="canvas"></canvas>
   
   <script>
     var canvas = document.getElementById('canvas');
     var ctx = canvas.getContext('2d');
     ctx.beginPath();
     ctx.moveTo(0, 0);
     ctx.lineTo(300, 0);
     ctx.lineWidth = 0.5;
     ctx.stroke();
   </script>