如何解决移动端Retina屏1px像素的问题？

Retina屏

首先我们先聊下Retina屏的概念。
Retina: 一种新型高分辨率的显示标准,又称视网膜显示屏。

导致1px的原因？

在移动端开发中，UI设计稿中设置边框为1px，前端在开发中如果出现border:1px,测试会发现在Retina屏机型中，1px会比较粗，即是经典的移动端1px像素问题。
比如iphone6的屏幕宽度为375px，设计师的视觉稿一般是750px，如果UI的border 1px,而前端实际开发的时候是不能采用1px border的，应该是1px/2。

如何解决呢？

屏幕快照 2021-09-08 上午6.11.11.png

1. 0.5px

.border-1px {
  border: 1px solid #333；
}
@media screen and(-webkit-min-device-pixel-ratio：2) {
  .border-1px {border: 0.5px solid #333；}
}
@media screen and(-webkit-min-device-pixel-ratio: 3) {
  .border-1px {border: 0.333333px solid #333；}
}

2. border-image

.border-1px {
  border: 1px solid #333；
}
@media only screen and (-webkit-min-device-pixel-ratio：2) {
  .border_1px {
    border-bottom: none;
    border-width: 0 0 1px 0;
    border-image: url(../img.png) 0 0 2 0 stretch;
  }
}

3. viewport + rem实现

const scale = 1 / window.devicePixelRatio;
const viewport = document.querySelector('meta[name="viewport"]');
if (!viewport) {
    viewport = document.createElement('meta');
    viewport.setAttribute('name', 'viewport');
    window.document.head.appendChild(viewport);
}
viewport.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale);
// 设置根字体大小
var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;
// 在CSS中用rem单位就行了

4. 伪元素+transform

.border-1px:before{
    content: '';
    position: absolute;
    top: 0;
    height: 1px;
    width: 100%;
    background-color: #999;
    transform-origin: 50% 0%;
}
@media only screen and (-webkit-min-device-pixel-ratio:2){
    .border-1px:before{
        transform: scaleY(0.5);
    }
}
@media only screen and (-webkit-min-device-pixel-ratio:3){
    .border-1px:before{
        transform: scaleY(0.33);
    }
}

5. box-shadow 模拟边框

box-shadow: 0  -1px 1px -1px #999,
            1px  0  1px -1px #999,
            0  1px  1px -1px #999,
            -1px 0  1px -1px #999;

6. svg

@svg border-1px {
  height: 2px;
  @rect {
    fill: var(--color, black);
    width: 100%;
    height: 50%;
    }
  }
.svg {
    border: 1px solid transparent;
    border-image: svg(border_1px param(--color #00b1ff)) 2 2 stretch;
}

参考高级前端进阶