记录一次移动开发的bug（三）

2017-06-23 遇到一个显示的bug，在华为P10PLUS下，字体会被遮盖一部分

一、截图

二、特征探测

三、解决过程

原来以为是手机分辨率过大然后走pc布局导致的，详细见记录一次移动开发的bug（二），但最后发现并不是，在这个手机上也是走的mobile布局

然后看这个手机的其他页面，明显字体也会变大一点儿，所以需要确定是不是由于系统字体默认比较大或者用户调整过系统字体大小导致的，让用户把字体调整小一号，就没有问题了，确定是系统字体的原因。

按理说，即使用户调整字体，也应该能正常显示，我们总不能让用户不调整字体吧？然后我就排查css代码，发现：

.articletitle {
   font-size: 14px; 
   line-height: 16px;
   max-height: 32px;
}

这个.articletitle就是被遮盖字体所在的dom，一看，就知道是行高的问题

改为：

.articletitle {
   font-size: 14px; 
   line-height: 1.142856; 
   max-height: 32px;
}

即可

原因：mobile布局，字体大小是14px，但是行高却写死成16px，再调整过字体的系统中，字体并不是css设置的14px，但是行高还是16px，导致字体变大，行高却没有变大，所以行高太小，会遮盖一部分的字体

教训：只要是行高，时刻记住要设置成比例，不要写死成px