完美解決移動Web小於12px文字居中的問題

前幾天的一篇博文：移動Web單行文字垂直居中的問題，提到了移動web裏小於12px的文字居中異常的問題，最後仍是改成12px才近乎解決了問題。可是有時候或許並非那麼樂觀，你並不能將本來定爲10px的字體改成12px。那該怎麼辦呢。

咱們都知道，移動端爲了高清屏顯示1px的border，會有那麼幾種方法，一般最好的方法是transform scale，而且支持圓角。既然一個border能縮放，那麼整個文字區域天然也能縮放。

好比上篇博文裏的示例，CSS是這樣的：

.label {
  height: 20px;
  line-height: 20px;
  font-size: 10px;
  border: 1px solid #000;
}

既然要縮放，就把1px border也一塊兒作的，省的再添加一個僞類，咱們將各個尺寸乘以2，而後縮放爲原來的一半：

.label {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  border: 1px solid #000;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}

但，或許是line-height在移動端確實不怎麼樣，居中效果並很差，改成padding纔好了些。

再嘗試一種方案，給元素外層再包一層父元素，用display：table來實現。

<div class="label-parent">
  <p class="label">你是誰</p>
</div>

.label-parent {
  display:table;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  border: 1px solid #000;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}
.label {
  display: table-cell;
  vertical-align:middle;
} 

這樣應該是比較健全的的方案，多寫一層，拋棄掉padding和line-height，最後實現的效果也不錯。有童鞋可能會擔憂會糊，確實chrome模擬器是會糊的，但手機屏幕大都是高清屏幕，幾乎不會出現模糊的狀況。

 

在IOS和Android4.x上工做正常，但Android2.3  並不會縮放，搜索一通有說是scale和translate一塊兒無論用的，有說viewport設置的，不過都沒用，因此能夠給Android2.x單獨設置未縮放的樣式，只要排版不亂就好。

.label-2x {
  height: 20px;
  line-height: 20px;
  font-size: 10px;
  border: 1px solid #000;
}

那如何知道系統是2x呢，在Special CSS3 Scaling for andriod version less than 2.3發現了一段好用的腳本：

var ua = navigator.userAgent;
if( ua.indexOf("Android") >= 0 ) {
  var androidversion = parseFloat(ua.slice(ua.indexOf("Android")+8));
  if (androidversion <= 2.3) {
      // alert('andriod < 2.3');
      // your code here
  }
}

你能夠動態的加一段css到style裏，若是隻有一個標籤你也能夠直接操做dom改變樣式。

 

至此，再不完美也不想不想再折騰了。。。