如何解决 1px 问题

[ReinerLau1]

概念

• 1px 问题指的是：在一些 Retina屏幕 的机型上，移动端页面的 1px 会变得很粗，呈现出不止 1px 的效果
• 因为设备像素比的存在，导致1px的CSS 像素，在这个设备上实际会用 2 个物理像素单元来进行渲染

[ReinerLau1]

解决一

• 直接写 0.5px
• 可以先在 JS 中拿到window.devicePixelRatio的值，然后把这个值通过 JSX 或者模板语法给到 CSS 的 data 里，达到这样的效果

  <div id="container" data-device={{window.devicePixelRatio}}></div>

• 然后就可以在 CSS 中用属性选择器来命中devicePixelRatio为某一值的情况

#container[data-device="2"] {
  border:0.5px solid #333
}

• 这种方法的缺陷在于兼容性不行，IOS 系统需要 8 及以上的版本，安卓系统则直接不兼容

[ReinerLau1]

解决二

• viewport 缩放来解决

const scale = 1 / window.devicePixelRatio;
// 这里 metaEl 指的是 meta 标签对应的 Dom
metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);