前言
遇到个小坑,踩了一个多小时,真鸡儿难受。
是这样的,在移动端字体大小设置了16px,结果到 iphone5 上显示的有大有小,很奇怪。开始的时候还以为是P标签的原因,查了半天文档...最后才发现是浏览器的默认行为。
正文
text-size-adjust
-webkit-text-size-adjust: ;
text-size-adjust: ;
-moz-text-size-adjust: ;
text-size-adjust
语法如下:
/* 文本不会放大 */
text-size-adjust: none;
/* 文本可能会被放大 */
text-size-adjust: auto;
/* 文本会被放大80% */
text-size-adjust: 80%;
/* 全局的值 */
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: unset;
text-size-adjust 属性的值为 auto , none , 百分比。
- none
禁用浏览器的文本溢出算法。在老的基于webkit内核的桌面端浏览器,这将阻止用户将网页放大或缩小。
- auto
启用 浏览器的文本溢出算法。该值用于取消先前使用CSS设置的none。
- <percentage>
启用 浏览器的文本溢出算法,具体用一个百分数来确定文本放大范围。
我的解决办法:
body {
text-size-adjust: 100% !important;
-webkit-text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
}
//必须加上对应的前缀
需要注意的是这个属性并未写进标准,使用时 必须添加上对应的前缀,然后 这个属性只有在一些智能手机和平板电脑上使用,当然,这种情况多出在小屏幕的手机上,桌面浏览器和一些平板电脑浏览器并没有一些溢出算法。