安卓手机1px问题

最新推荐文章于 2024-04-16 09:18:10 发布

pliangwei

最新推荐文章于 2024-04-16 09:18:10 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：移动端开发文章标签：前端开发

本文链接：https://blog.youkuaiyun.com/seven0404/article/details/78083644

移动端开发专栏收录该内容

16 篇文章

订阅专栏

这是使用vue+less写的项目：

先用js判断是是否是安卓

if(!navigator.userAgent.match(/(iPhone|iPod|ios)/i)){ // 匹配安卓
  this.show1px = true;
}

<li v-for="item in list" :key="item.id" :class="{'scale-1px': show1px}"></li>
css
li{
&.scale-1px{
  position: relative;
  margin-bottom: 18px;
  width: 100%;
  border:none !important;
  &:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border-bottom: 1px solid @topbar;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
  }
}
}
可以改变border-bottom
用来决定修改那边的边框的1像素，支持圆角