手机端页面文字时大时小丨技术开发分享录

手机端页面文字时大时小

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"**Font Boosting** 被称为字体提升,也被称为Text Autosizer,Font Inflation.是 Webkit 给移动端浏览器提供的一个特性:当我们在手机上浏览网页时,很可能因为原始页面宽度较大,在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会自动将其中的文字字体变大,保证在即不需要左右滑动屏幕,也不需要双击放大屏幕内容的前提下,也可以让人们方便的阅读页面中的文本。\n\n## 解决方案一\n\n给所有元素加上**-webkit-text-size-adjust**属性\n\n```css\nhtml * {\n  -webkit-text-size-adjust: none;\n}\n```\n\n[text-size-adjust](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-size-adjust) 可选值介绍:\n\n```\n/* 文本不会放大 */\ntext-size-adjust: none;\n\n/* 文本可能会被放大 */\ntext-size-adjust: auto;\n\n/* 文本固定为原大小的80% */\ntext-size-adjust: 80%;\n\n/* 全局的值 */\ntext-size-adjust: inherit;\ntext-size-adjust: initial;\ntext-size-adjust: unset;\n```\n\n## 解决方案二\n\n给所有元素设置最大高度\n\n```css\nhtml * {\n  max-height: 100%;\n}\n```"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看