最近做一个页面时,需要pc的页面在移动端浏览时保持pc的样式缩小。但是发现部分文字被放大了。看上去特别诡异。如下图

绿框是PC端查看时的正常样式,
红框是移动端看的字体放大的诡异样式

是什么原因呢?

后来接触到了一个概念,终于了解了问题的本来面目。这个概念叫做 “Font Boosting”(文字爆炸) 
Font Boosting被称为字体提升,也被称为Text Autosizer,Font Inflation.是 Webkit 给移动端浏览器提供的一个特性:当我们在手机上浏览网页时,很可能因为原始页面宽度较大,在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会自动将其中的文字字体变大,保证在即不需要左右滑动屏幕,也不需要双击放大屏幕内容的前提下,也可以让人们方便的阅读页面中的文本。 具体大家可以去百度了解一下。

如何解决?

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

  • 可通过指定max-height来避免触发。比如 .class {max-height:100%;}
  • .class{text-size-adjust:none;}
  • 指定initial-scale = 1
  • *{-webkit-text-size-adjust: none;}  // 我用的此方法,全局禁止 Webkit内核浏览器的文字大小调整功能

转载于:http://www.freetechs.cn/archives/128

pc页面在移动端浏览时部分字体放大,与pc字体大小不一致(Font Boosting)的更多相关文章

  1. 前端PC页面,移动端页面问题笔记~~

    <!DOCTYPE html> <html> <head> <meta charset="gbk"/> <meta name= ...

  2. 页面在Native端滚动时模拟原生的弹性滚动效果

    width: 100%;overflow: scroll;overflow-y: hidden;-webkit-overflow-scrolling: touch;   ---- 对应的滚动内容内添加 ...

  3. 【Javascript Demo】移动端访问PC端网页时跳转到对应的移动端网页

    不想通过CSS自适应在PC端和移动端分别显示不同的样式,那么只能通过在移动端访问PC端网页时跳转到对应的移动端网页了,那么怎么跳转呢,网上也有很多文章说明,下面是本人测试有效的方式. 1.效果图 PC ...

  4. pc端页面在移动端显示问题

    1.pc端页面在移动端显示,默认视口宽度是980px(也就是body宽度是980px),可通过meta标签设置为需要的尺寸,比如页面中元素最大宽度是1220px,则如下所示 <meta name ...

  5. js代码检测设备问题:为什么在移动端检测设备的时候会出现pc的页面

    为了在手机上也能正常显示页面,所以为之前写的页面又重写了一遍,专门用来在移动端显示,用js代码检测设备,如果是pc就显示pc的页面,如果是移动就显示移动的页面,但遇到一个问题就是在移动端打开会有一个延 ...

  6. js在新页面中返回到上一页浏览的历史位置

    在微信浏览器中浏览页面时,在当前页面中当我们将页面往下滚动到某一个位置时,可能我们就会点击某个链接而页面跳转到了另外一个页面,而当我们又返回到上一个页面时我们会发现那个页面还停留在我们之前浏览的位置, ...

  7. 在PC上测试移动端网站和模拟手机浏览器的5大方法

    在PC上测试移动端网站和模拟手机浏览器的5大方法 来源:互联网 作者:佚名 时间:03-19 10:14:54 [大 中 小]                最近公司要开发网站的移动版,让我准备准备知 ...

  8. Vue 页面15分钟无操作时返回首页

    这种需求手机端和pc端一般是不存在的,因为都是可以手动操作刷新的. 最近在做一个户外社区大屏的项目,因为大屏是全屏显示,没法手动刷新,不可能在页面专门做一个刷新按钮,也不好看,那这样的需求就显得格外重 ...

  9. PC/APP/H5三端测试的相同与不同

    随着手机应用的不断状态,同一款产品的移动端应用市场占相较PC端也越来越大,那么app与PC端针对这些产品的测试有什么相同与不同之处呢?总结如下: 首先谈一谈相同之处: 一,针对同一个系统功能的测试,三 ...

随机推荐

  1. js 跳转链接

    1.跳转链接 在当前窗口打开 window.location.href="http://www.baidu.com" 等价于 <a href="baidu.com& ...

  2. 云时代架构阅读笔记六——Java内存模型详解(二)

    承接上文:云时代架构阅读笔记五——Java内存模型详解(一) 原子性.可见性.有序性 Java内存模型围绕着并发过程中如何处理原子性.可见性和有序性这三个特征来建立的,来逐个看一下: 1.原子性(At ...

  3. 干货分享:Research Essay写作规范详解

    同学们在刚到国外时觉得一切都很新鲜,感觉到处都在吸引着他们,但是大部分留学生在刚碰到Research Essay便是一头包.其实Research Essay也没有想象中的那么难,只是留学生们初次接触, ...

  4. 由sqli-labs/Less-5学习各种基础盲注技巧

    本文为本人在学习中的总结,仅涉及基础的盲注技巧,可能多有疏漏之处,欢迎指教. 另外本人博客的SQL注入分类下有一些方面的详细讲解,在此只介绍简单的使用. 0x00.介绍一下本人对盲注的总结. 盲注就是 ...

  5. python基础(二)抽象

    1 函数与模块 编程大师Martin Fowler先生曾经说过:"代码有很多种坏味道,重复是最坏的一种!" 函数 为了减少代码中重复出现的冗余代码,通常我们选择创建函数来供代码重复 ...

  6. 【剑指Offer】面试题13. 机器人的运动范围

    题目 地上有一个m行n列的方格,从坐标 [0,0] 到坐标 [m-1,n-1] .一个机器人从坐标 [0, 0] 的格子开始移动,它每次可以向左.右.上.下移动一格(不能移动到方格外),也不能进入行坐 ...

  7. oracle批量修改字段长度

    alter table 表名 modify (字段名1 字段类型1(长度1),字段名2 字段类型2(长度2)) alter table 表名 modify column_name varchar2(3 ...

  8. BZOJ:2186: [Sdoi2008]沙拉公主的困惑

    问题:可能逆元不存在吗? 题解: Gcd(a,b)==Gcd(b,a-b); 从数据范围可以看出应该求M!的欧拉函数: 然后通过Gcd转化过去 一开始没想到 #include<iostream& ...

  9. C++ STD Gems04

    count.count_if.all_of.any_of.none_of #include <iostream> #include <vector> #include < ...

  10. UVA 10003 区间DP

    这个题目蛮有新意的,一度导致我没看透他是区间DP 给一个0-L长度的木板,然后给N个数,表示0-L之间的某个刻度,最后要用刀把每个刻度都切一下 使其断开,然后每次分裂的cost是分裂前的木板的长度.求 ...