關於安卓下H5渲染文字上浮

舉個栗子

正常狀況文字是垂直水平居中，即便是阿里這種大廠，在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金幣「 文字上浮。

結論

1.低於12px實現垂直水平居中，在安卓上仍是像小強同樣頑強很難解決。

2.設置默認字體是比較通用的處理方式, 搭配table、flex靈活佈局（處理>=12px的場景）。

3.須要前端+UED推行設計約束來從根本解決。

ps：有大佬能提供好的解決方案請賜教～感謝🙏

參考文章：

IMweb社區：imweb.io/topic/5848d…

知乎：www.zhihu.com/question/39…