移动端字体显示大小和css设置大小的不一致解决方案

出现问题

这几天在做移动端页面，研究了一下手淘的 flexible.js 并在自己项目中试行了一下，然后发现了一个纠结无比的问题，即：css里设置了字体大小，但是显示却非常诡异，用 “诡异” 来形容是因为这个问题在定位的时候真的无迹可寻。

探查原因

后来接触到了一个概念，终于了解了问题的本来面目。这个概念叫做 “Font Boosting”（文字爆炸）。

当 viewport 的 initial-scale 为 1时，不会涉及这个问题。

而 flexible.js 会依据 window.devicePixelRatio 值来对页面进行缩放

这时候，webkit 内核在移动端浏览器提供的 “Font Boosting” 属性开始起作用了，它会对字体进行放大，以便让人们方便的查看文本。

其计算规则如下：

multiplier = Math.max(1, deviceScaleAdjustment * textScalingSlider * systemFontScale * clusterWidth / screenWidth);
if (originFontSize < 16) {computedFontSize = originFontSize * multiplier;
}
else if (16 <= originFontSize <= (32 * multiplier - 16)) {computedFontSize = (originFontSize / 2) + (16 * multiplier - 8);
}
else if (originFontSize > (32 * multiplier - 16)) {computedFontSize = originFontSize;
}

originFontSize: 原始字体大小
computedFontSize: 经过计算后的字体大小
multiplier: 换算系数
deviceScaleAdjustment: 变量（1.05 - 1.3），有专门的计算规则，当指定 viewport 的 width=device-width 时此值为 1
textScalingSlider: 浏览器中手动指定的缩放比例，默认为 1
systemFontScale: 系统字体大小，Android设备可以在「设备 - 显示 - 字体大小」处设置，默认为 1
clusterWidth: 应用 Font Boosting 特性字体所在元素的宽度
screenWidth: 设备屏幕分辨率（DIPs, Density-Independent Pixels），如 iPhone 5 为 320

问题解决

下面两个样式选择一个就可以解决问题

p{max-height: 100%} //给元素加一个高度
p{-webkit-text-size-adjust: none;} //禁用Webkit内核浏览器的文字大小调整功能

根源在于

Font Boosting 仅在未限定尺寸的文本流中有效，所以给元素指定高度，就可以避免 Font Boosting 被触发。但是文本流一般都是不固定高度的，所以我们可以一个最大高度。
直接禁用调整文字大小的功能，我们都知道浏览器最小字体是12px，你给一个元素加上 ‘font-size: 10px;’，其大小已然按照 12px 来显示，那么我们就想让字体为 10px，就可以使用 ‘-webkit-text-size-adjust’ 属性，但是建议大家不要轻易使用。

移动端字体显示大小和css设置大小的不一致解决方案相关推荐

产生粗体字的html标签,html字体加粗用css设置文字粗体样式
html如何加粗文字,HTML加粗标签元素有哪些?CSS字体加粗又怎么来实现?粗体代码是什么? 综合以上问题,可以使用CSS样式和HTML标签两种方法来实现,在实际布局时候根据需要来选择文字字体加粗方 ...
php链接字体颜色,通过html/css设置超链接字体颜色
超链接字体颜色设置是通过css来设置,a链接的颜色设置常用的有以下两种,1.超链接a的初始状态颜色,2.超链接字体的鼠标滑过颜色,还有两种病不常用:3.超链接字体的已访问颜色超链接字体颜色设置是通过 ...
html怎样设置字体不能被选中,css设置：图片文字等不能被选择
uva 12034 /* 比赛的名次的所有方案数 ___________________________________________________________________________ ...
html语言加粗,html字体加粗用css设置文字粗体样式
HTML加粗标签元素有哪些?CSS字体加粗又怎么来实现?粗体代码是什么? 综合以上问题,可以使用CSS样式和HTML标签两种方法来实现,在实际布局时候根据需要来选择文字字体加粗方法途径. 一.html ...
css行间距怎么设置(CSS设置行间距)
1. CSS设置行间距 CSS将文本设置双倍行距后方法: 打开一个html代码页面,创建一个含有一段文本的div标签. 使用css的line-height属性设置行的高为40px. 保存html代码后 ...
html前端小技巧—字体及颜色色值准确设置
今天分享下"html前端小技巧-字体及颜色色值准确设置"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一 ...
html字体设置大小打印无效,css font-size属性怎么不管用？
css font-size属性用于设置字体大小.在实际的开发中,有时会发现font-size属性不管用了,设置的字体大小是无效的.这是什么原因?怎么解决?下面本篇文章给大家介绍一下. css font ...
html字体设置大小打印无效,使用css中的zoom:50%后对页面文字大小不生效，什么原因？...
css样式如下: body { zoom: 50%; } 发现对图片等都变为原大小的一半,但是字体还是设置的大小(比如font-size:30px).什么原因? 测试了下,说下我的测试结果: 我手头 ...
python3.4学习笔记(十八) pycharm 安装使用、注册码、显示行号和字体大小等常用设置...
python3.4学习笔记(十八) pycharm 安装使用.注册码.显示行号和字体大小等常用设置 Download JetBrains Python IDE :: PyCharm http://ww ...

移动端字体显示大小和css设置大小的不一致解决方案

出现问题

探查原因

问题解决

移动端字体显示大小和css设置大小的不一致解决方案相关推荐

最新文章

热门文章