移动web里小于12px的文字居中异常的问题，最后还是改为12px才近乎解决了问题。但是有时候或许并不是那么乐观，你并不能将原本定为10px的字体改为12px。那该怎么办呢。
我们都知道，移动端为了高清屏显示1px的border，会有那么几种方法，通常最好的方法是transform scale，并且支持圆角。既然一个border能缩放，那么整个文字区域自然也能缩放。
CSS是这样的：
<style>
.corner {
display: inline-block;
position: absolute;
top: -6px;
left: 35%;
width: 40px;
height: 14px;
background: -webkit-linear-gradient(left,#CA9858, #EFBF5E);
background: -webkit-gradient(linear,0% 0%, 100% 100%,from(#CA9858),to(#EFBF5E));
background: linear-gradient(top, #CA9858, #EFBF5E);
background-color: #EFBF5E;
font-size: 9px;
line-height: 11px;
text-align: center;
border-radius: 5px;
color: #fff;
}
</style>
开始缩放，我们将各个尺寸乘以2，然后缩放为原来的一半，定位的尺寸就不用了，然后我们相对于左上角的0,0点缩放：
<style>
.corner {
display: inline-block;
position: absolute;
top: -6px;
left: 35%;
width: 80px;
height: 30px;
background: -webkit-linear-gradient(left,#CA9858, #EFBF5E);
background: -webkit-gradient(linear,0% 0%, 100% 100%,from(#CA9858),to(#EFBF5E));
background: linear-gradient(top, #CA9858, #EFBF5E);
background-color: #EFBF5E;
font-size: 18px;
border-radius: 14px;
color: #fff;
-webkit-text-size-adjust: none;
box-sizing: border-box;
line-height: 30px;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
</style>
现在就好多了，或许是line-height在移动端确实不怎么样，居中效果并不好，应该改为padding，然后再进行缩放。
再尝试一种方案，给元素外层再包一层父元素，用display：table来实现。
<div class="label-parent">
<p class="label">你是谁</p>
</div>
<style>
.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;
}
</style>这样应该是比较健全的的方案，多写一层，抛弃掉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改变样式。
<style>
background: -webkit-linear-gradient(left,#CA9858, #EFBF5E);
background: -webkit-gradient(linear,0% 0%, 100% 100%,from(#CA9858),to(#EFBF5E));
background: linear-gradient(top, #CA9858, #EFBF5E);
background-color: #EFBF5E;
</style>