移动端动态设置viewport引起的大段文字字号变大

移动端动态设置viewport引起的大段文字字号变大

移动端动态设置viewport引起的大段文字字号变大的原因并不是什么bug,而是 Webkit 给移动端浏览器提供的一个特性:当我们在手机上浏览网页时,很可能因为原始页面宽度较大,在手机屏幕上缩小后就看不清其中的文字了。这个特性叫Font Boosting(字体提升),也被称为Text Autosizer,Font Inflation。而 Font Boosting 特性在这时会自动将其中的文字字体变大,保证在即不需要左右滑动屏幕,也不需要双击放大屏幕内容的前提下,也可以让人们方便的阅读页面中的文本。

出现该特性的原因是因为:

  • 在移动端页面缩放情况下(initial-scale!=1),chrome有可能重新调整字号;

  • 未限定尺寸的文本流中有效

解决方案

  • Font Boosting 仅在未限定尺寸的文本流中有效,给元素指定宽高,就可以避免 Font Boosting 被触发

  • 可通过指定max-height来避免触发。比如 .class {max-height:99999px;}

  • .class{ -webkit-text-size-adjust:none;}

  • 指定initial-scale = 1

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

tutouman.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值