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

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

转载于:https://www.cnblogs.com/zjzhome/p/4913741.html

完美解决移动Web小于12px文字居中的问题相关推荐

浏览器支持字体大小情况以及 Chrome设置小于12px的字体的处理方案
一.浏览器默认字体大小转载:https://www.zhihu.com/question/268477963 二.浏览器支持的最小font-size 转载:https://www.jianshu.c ...
中文代码谷歌_Chrome谷歌浏览器下不支持css字体小于12px的解决办法
先来看下 ie.火狐.谷歌浏览器下各个字体显示情况ie下: 火狐下: 谷歌下: 从上面的图可以很明显看出谷歌下 css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px; 那么网上一直 ...
完美解决向UILable 文字最后插入N张图片,支持向限制行数的UILable 最后一行插入,多余文字显示......
效果: ====直接上代码吧=== // // UILabel+StringFrame.h // QYER // // Created by qyer on 15/3/19. // Copyright ...
【css】怎么让Chrome支持小于12px 的文字
谷歌浏览器Chrome是Webkit的内核,有一个 -webkit-text-size-adjust 的私有 CSS 属性,通过它即可实现字体大小不随终端设备或浏览器影响. CSS样式定义如下: -w ...
Chrome浏览器不支持字体小于12px的解决办法
谷歌浏览器默认最小字体为12px,小于12px的字体它都以12px显示,具体效果见下图.有些特殊情况下我们需要字体小点,特别是在制作英文网站的时候,怎么办?既然有问题,我们就有解决问题的方法. < ...
Eclipse下Maven新建Web项目index.jsp报错完美解决（war包）
Eclipse下Maven新建Web项目步骤 1. 2. 3. 4. 5. 问题描述最近用eclipse新建了一个maven项目,结果刚新建完成index.jsp页面就报错了,先把错误信息贴出来看看 ...
[css] 要让Chrome支持小于12px的文字怎么做？
[css] 要让Chrome支持小于12px的文字怎么做? 1, 改用图片 2, 使用 -webkit-text-size-adjust:none; 但是不支持chrome 27.0以上版本 3, 使 ...
HTML字体小于12谷歌不兼容,Chrome谷歌浏览器下不支持css字体小于12px的解决办法...
coder.png 在这一年的工作中,我发现很多问题你利用自己的「聪明才智」绕过去了,总有一天它会和你不期而遇,今天我们就来直面一个字体兼容性的小问题:Chrome谷歌浏览器下不支持css字体小于12 ...
记Outlook插件与Web页面交互的各种坑 (含c# HttpWebRequest 连接https 的完美解决方法)
记Outlook插件与Web页面交互的各种坑 (含c# HttpWebRequest 连接https 的完美解决方法) 参考文章: (1)记Outlook插件与Web页面交互的各种坑 (含c# Htt ...

完美解决移动Web小于12px文字居中的问题

完美解决移动Web小于12px文字居中的问题相关推荐

最新文章

热门文章