你的位置:首页 > 网页设计

[网页设计]完美解决移动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改变样式。

 

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