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

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

使用 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>

使用 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);
使用 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>
使用 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);