h5 移动端 字体行高偏上问题

才发现 移动端项目怎么会有那么多问题呢?

现在不用搞ie的hack兼容问题了

又来了h5的兼容

h5 移动端 字体行高偏上问题

 

哎,问题还是得解决啊

言归正传

 

问题:移动端h5页面,文本行高偏上的问题,(据说ios手机没有),咱也没ios手机,咱也不敢问啊,有的大佬试试

当我们使用rem,em,作适配时,字体可能出现奇数,带小数点的,字体大小,当字体大小小于12px时,安卓手机为避免奇数字体带来的偏差会自动设置成偶数

 

h5 移动端 字体行高偏上问题

 

网上有很多说法,

比如,

用flex布局设计 设置 align-items: center 的

 

设置行高为 

line-height: normal;
vertical-align: middle;
使用padding撑开的

 

反正我是没生效,不知道大佬们生效了没有

h5 移动端 字体行高偏上问题

 

 

经过测试,可行的方法,我的是小米手机(我发誓我是爱国的,下一部就买华为)

 

方法一:

改变字体大小,使其大于等于12px

将模块整体放大一倍,再使用 transform: scale(0.5); transform-origin: 0% 0%; 缩小为正常

方法二:

使用自适应表格布局 - - table布局

注意将外层容器设置脱离文档流 ,使用绝对定位,flex,浮动啊,都可以,看你喜欢

display: table-cell;

vertical-align: middle;

text-align: center;

 

 

收获测试崇拜值一枚
 
h5 移动端 字体行高偏上问题

 

h5 移动端 字体行高偏上问题

上一篇:javascript:void(0)


下一篇:iostat详解