完美解决移动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改变样式。

 

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