关于安卓下H5渲染文字上浮

最新推荐文章于 2024-06-13 18:32:13 发布

weixin_34082695

最新推荐文章于 2024-06-13 18:32:13 发布

阅读量416

点赞数

文章标签：移动开发前端 ViewUI

原文链接：https://juejin.im/post/5ce65dd56fb9a07ede0b1c3d

版权

举个栗子

正常情况文字是垂直水平居中，即使是阿里这种大厂，在webapp端，H5页面也存在安卓渲染文字上浮的情况。

那要怎么解决这种情况？

方案

1.设置默认字体+UED设计约束

@font-face {  font-weight: normal;  font-style: normal;  font-family: 'DINPro-Medium';  src: url('../../../assets/font/DINPro-Medium.ttf') format('truetype');}
body,html{  font-family:DINPro-Medium;}复制代码

给H5工程设置默认字体，UED团队在设计阶段就尽量减少低于12px的元件设计（低于12px会导致文字上浮）。

2.transfrom+transform-origin

.content {
    display: inline-block;
    height: 40px;
    background-color: gray;
    line-height: 40px;
    font-size: 20px;
    transform: scale(0.5);
    transform-origin: 0% 0%;
}复制代码

将元件属性放大2倍，在使用scale进行缩放，亲测有效并也在业务中使用到，但是这种方式也有缺点：元件属性放大2倍，所以占据页面空间也扩大了2倍，因此适用性并不好。

3.table布局

看了很多相关文章，有人说可以完美解决，但是测试后并不是这样

.coinBox{  display: table;  margin-left: 0.3rem;  .coinNum{    color: #fff;    height: 0.26rem;    font-size: 12px;    display: table-cell;    vertical-align: middle;  }}复制代码

.coinBox{  display: table;  margin-left: 0.3rem;  .coinNum{    color: #fff;    height: 0.26rem;    font-size: 10px;    display: table-cell;    vertical-align: middle;  }}复制代码

result: 只是修改了font-size为10px，就导致渲染 ”领100金币“ 文字上浮。

4.flex

.getCoinButton{  width: 0.93rem;  height: 0.26rem;  background-image: linear-gradient(-90deg, #FF3411 11%, #FF7859 89%);  border-radius: 100px;  position: absolute;  right: 0.16rem;  top: 50%;  transform: translate(0,-50%);  display: flex;  align-items: center;  justify-content: center;  .coinButtonHead{    width: 0.14rem;    height: 0.14rem;  }  .coinNum{    font-size: 12px;    color: #fff;    margin-left: 0.04rem;  }}复制代码

.getCoinButton{  width: 0.93rem;  height: 0.26rem;  background-image: linear-gradient(-90deg, #FF3411 11%, #FF7859 89%);  border-radius: 100px;  position: absolute;  right: 0.16rem;  top: 50%;  transform: translate(0,-50%);  display: flex;  align-items: center;  justify-content: center;  .coinButtonHead{    width: 0.14rem;    height: 0.14rem;  }  .coinNum{    font-size: 9px;    color: #fff;    margin-left: 0.04rem;  }}复制代码

只是修改了font-size为9px，就导致渲染 ”领50金币“ 文字上浮。