移动端 1px 兼容适配问题

由于Retina屏幕的设备像素比(Device Pixel Ratio)高于1，导致1px的边框在物理像素上无法均匀分配
总的来说 就是边框设置为1px时 在苹果的一些机型上显示不全 或者不清晰
网上的方法试了个遍 都不太行
最后给大家一个工作中最实用的方法
将border设置为2px
问：那都变粗了 颜色变深了 和UI稿不一样 产品不能接受怎么办?
答：在2px的基础上把颜色调浅些 接近原来的颜色就ok

列举一下自己试过的方法
1.压根不生效

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .border {
    border: 0.5px solid #000;
  }
}

2.生效了 但是 边框的边缘深浅不一

.element {
  box-shadow: inset 0 0 0 1px #000;
}

3.又笨又不生效又垃圾的方法

.border {
  background:
    linear-gradient(black, black) left top,
    linear-gradient(black, black) left bottom,
    linear-gradient(black, black) right top,
    linear-gradient(black, black) right bottom;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
  background-origin: content-box, content-box, content-box, content-box;
  padding: 1px;
}

4.换成边框背景图片 绝对生效 但是被大佬训了 影响页面性能了
【能用样式写的尽量不要用图片】

其他：
当然 也有可能是盒子的布局问题 没有撑开 或者被上个盒子遮住了
可以审查下盒子的高度