zoukankan      html  css  js  c++  java
  • 移动端开发网页时,有部分字体无故变大或变小

    今天发现手机端,字体大小会随着容器的宽度变化而变化,着很奇怪,加了统一的字体大小样式都不行,于是查了一下:

    首先,这个准确说不是由开发人员导致的bug,这是webkit内核移动浏览器特性导致的,这个特性被称做「Text Autosizer」,又称「Font Boosting」、「Font Inflation」,是 Webkit 给移动端浏览器提供的一个特性:当我们在手机上浏览网页时,很可能因为原始页面宽度较大,在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会自动将其中的文字字体变大,保证在即不需要左右滑动屏幕,也不需要双击放大屏幕内容的前提下,也可以让人们方便的阅读页面中的文本。

    解决方法

    1.元素单独设置width或height或max-height;
    max-height:100%;,因为内容显示一般不会固定高和宽。

    2.给元素设置 -webkit-text-size-adjust: none;
    可禁用Text Autosizer,这个属性还能使得我们在移动端使用小于12px的字体。此属性在桌面版中无效。

    参考网址:https://www.jianshu.com/p/b62e081fd53f

  • 相关阅读:
    java面试常见的类
    Day6
    DAY5
    Day4
    Day3
    Day2
    Day1
    echarts3关系图:力引导布局, 固定某些节点
    Hbuilder中配置cmd
    webpack 学习
  • 原文地址:https://www.cnblogs.com/fqh123/p/11181102.html
Copyright © 2011-2022 走看看