移动端1px如何是实现

思考:为什么移动端的1px会变粗

• 我们需要清楚,css中1px不等于移动端的1px
• 原因:手机像素密度不同(dpr = 物理像素/设备独立像素 )

最好的解决办法

viewport + rem 实现

<!--当dpr=2时-->
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

<!--在devicePixelRatio = 3 时，输出viewport：-->
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

扩展概念

• 物理像素

物理像素即设备像素 . 是显示设备中微小的物理部件. 每个像素根据操作系统设置自己的颜色和亮度 .

• 设备独立像素

设备独立像素也称密度无关像素 , 可以认为是计算机坐标中的一个点 . 这个点可以由程序使用的虚拟像素(css像素),转换为物理像素 .

• css像素

一个用于浏览器上的抽象的单位 , 用来精确web页面上的内容 .

• 屏幕密度

指一个设备表面上的像素数量 , 通常以每英寸多少像素计算

• 设备像素比

dpr = 物理像素/设备独立像素

应用

• window.devicePixelRatio获得当前设备的dpr

详细请看大神解析: https://github.com/amfe/article/issues/17?from=singlemessage