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

最新推荐文章于 2024-05-08 10:39:07 发布

weixin_30488085

最新推荐文章于 2024-05-08 10:39:07 发布

阅读量330

点赞数

原文链接：http://www.cnblogs.com/wangziye/p/10004064.html

版权

在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;
 }

通过整体缩放来进行兼容

转载于:https://www.cnblogs.com/wangziye/p/10004064.html