1. 程式人生 > >H5 --(解決)安卓的webview中line-height等於height不垂直居中問題

H5 --(解決)安卓的webview中line-height等於height不垂直居中問題

問題描述:用rem適配的H5頁面在安卓的webview中,當line-height等於height時,有時會稍微偏上一些,不能垂直居中(ps:ios上沒有這個問題)
1、分析原因:由於用rem作適配,則根元素的字型大小可能不是整數,然後將元素的字型大小設定為rem為單位時,字型實際的大小若以px為單位則可能是奇數(更可能並不是整數);且當字型大小小於12px時,安卓webview中的瀏覽器為了避免奇數font-size帶來的偏差,自動設定成了偶數,所有會有一些偏上。
2、解決思路

<1> 改變字型大小使其大於12px

改變字型大小讓它大於12 px(擴大2倍),將字型盒子的盒子相關屬性(寬度、高度、行高、內邊距、圓角、字型大小等)設定為需求大小的 2 倍,再使用transform進行縮放 0.5 倍,此時字型大小已大於12px,能夠正常居中。

.btn {
      float: right;
      width: 1.62rem *2;
      height: .64rem *2;
      line-height: .64rem *2;
      text-align: center;
      border-radius: 2rem *2;
      font-size: .28rem *2;
      color: #282624;
      letter-spacing: 0;
      margin: .28rem -1.22rem 0 0;
      // 安卓webview中line-height不垂直居中問題
      transform: scale(0.5);
      transform-origin: 0% 0%;
    }

最佳實踐:適用於單個或者是一排的佈局。當為多行或者列表時,因為transform縮放是不影響頁面佈局的,需用定位將字型盒子進行脫標才行。

<2> 使用自適應表格佈局 - - table佈局

由於table佈局和浮動一起使用會失效,所以在字型盒子外在包一層盒子,將浮動應用在此外層盒子上即可。

.outer {	/* 外層盒子進行浮動 */
    float: left;
}
.inner {
    font-size: 10px;  /* 字型大小小於12px的內層盒子進行表格佈局 */
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

最佳實踐:只要相容table佈局,這種方法便適用。