meta 与 发丝线

[RaySaii]

在 pc 端我们很少会注意边框一类的 border, 但是在移动端1px 的线会显得格外粗,造成这种问题的根本原因是手机上用 css 指定1px并不是真正的1px.

从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的.其他品牌的移动设备也是这个道理.例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论.

那怎么解决这个问题呢?

一.通过 meta 标签

1.什么是 viewport?

手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分.
我们常见的是这种:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

那么我们可以将initial-scale,maximum-scale设为0.5,这样指定1px 线,显示出的效果就是一半宽,但是这是一种比较粗暴的做法,目前还未在项目中使用,是否会影响正常的样式布局还需验证.

二.通过 svg

这也是我项目中正在使用的方法,因为 svg 标签是矢量的,并不会因为屏幕像素的变化而变化,指定1px 就是物理1px.
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="1px" height="100%"> <line x1="0" y1="100%" x2="0" y2="0" stroke="@{color}"></line> </svg>' )

做发丝线还有其他方法:

• 使用 transform:scaleY(0.5)(但是transform问题在于虽然尺寸缩小了,但是屏幕占位还是原来的尺寸)
• 使用渐变(设置渐变稍微麻烦,依然有占位问题)
• 使用 border-image(没用过)
• ...待探索

综上这些方法,除了 svg 之外,都不能精准的画出物理像素 1px 的线,在 dpr 为3的设备上,其实应该将css 的1px 缩小到1/3.所以 svg 是为较为优秀的方法.