移动端BUG问题及解决方法收集

1. 用rem布局，当line-height等于height时，安卓手机文字偏上，不是垂直居中（ios正常）

改前

• 将宽度、高度、行高、内边距、圆角、字体大小等扩大 2 倍，再使用transform进行缩放 0.5 倍，此时字体大大于12px。

改后

//原
.labels {
    width: 0.7rem;
    height: 0.3rem;
    line-height: 0.3rem;
    color: #0ba300;
    font-size: 0.2rem;
    box-sizing: border-box;
}
//改
.labels {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.4rem;
    height: 0.6rem;
    line-height: normal;
    font-size: 0.4rem;
    color: #0ba300;
    transform: scale(0.5);
    transform-origin: left top;
    box-sizing: border-box;
}

---

2. 图片在手机浏览器上单击或者双击会放大预览问题

• 解决方法：在img标签外面包一层a标签，并且把双击事件禁止掉，完美解决。

<a href="javascript:;"  ondblclick="return false;"><img src="img1.png" alt=""/></a>