完美解決移動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改變樣式。

 

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