首页 > 移动平台 > 详细

移动端开发字体自动放大

时间:2020-11-20 15:01:30      阅读:30      评论:0      收藏:0      [点我收藏+]

一、概念

  这是webkit内核移动浏览器特性导致的,这个特性被称做Text Autosizer,又称Font BoostingFont Inflation,是webkit给移动端浏览器提供的一个特性:

  • 当我们在手机上浏览网页时,很可能因为原始页面宽度较大,在手机屏幕上缩小后就看不清其中的文字了。
  • 而 Font Boosting 特性在这时会自动将其中的文字字体变大,保证在即不需要左右滑动屏幕,也不需要双击放大屏幕内容的前提下,也可以让人们方便的阅读页面中的文本。

二、解决办法

1、元素单独设置width或height或max-height

  • 因为内容显示一般不会固定高和宽
{max-height:100%;}

2、给元素设置 -webkit-text-size-adjust: none

  • 可禁用Text Autosizer,这个属性还能使得我们在移动端使用小于12px的字体。此属性在桌面版中无效。

text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;

3、webkit 中应该有判断如果initial-scale=1时,不触发Text Autosizer

  • 浏览器的目的是为了放大,而设置屏幕不能放大,自然Text Autosizer就失去的意义。
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 或 -->
<meta name ="viewport" content ="initial-scale=1, maximum-scale=1, minimum-scale=1">

 

移动端开发字体自动放大

原文:https://www.cnblogs.com/gg-qq/p/13992341.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!