小程序1px边框在苹果机上变粗问题

在ios系统上1px的边框会变成2px,ui会感觉很粗

列表间隔,只需要一条边框

.border:after {

  position: absolute; 

  content: '';

  width: 100%;

  left: 0;

  bottom: 0;

  height: 1px;

  background-color: #e3e5e9;

  -webkit-transform: scale(1, 0.5);

  transform: scale(1, 0.5);

  -webkit-transform-origin: center bottom;

  transform-origin: center bottom;

}

通过缩放来兼容iso机

 

我们时常会遇到另外一种情况,就是页面中的小tag 四边boder

.border::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid #eee;
    transform-origin: 0 0;
   -webkit-transform-origin: 0 0;
    transform: scale(0.5, 0.5);  
    -webkit-transform: scale(0.5, 0.5);
    box-sizing: border-box;
 }

通过整体缩放来进行兼容

 

你可能感兴趣的:(小程序1px边框在苹果机上变粗问题)