最近做一个页面时,需要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. 逆战:微信小程序

                                                            微信小程序的生命周期 onLaunch: function(options) { // ...

  2. mybatis update set 多个字段

    <update id="updateCustomer" parameterType="com.entrym.domain.Customer"> UP ...

  3. Oracle-SQL 小题

    1.查询姓名中不包含C和c的员工信息 ; ①字符函数 instr(input,char,m,n) 的用法:返回在字符值中查找字符串char的数字位置.参数m作为查找的开始,参数n代表第n次发现.m和n ...

  4. opencv目录(转)

    github:https://github.com/opencv/opencv OpenCV 3 的源代码文件夹: 3rdparty/: 包含第三方库,如用视频解码用的 ffmpeg.jpg.png. ...

  5. linux X64函数参数传递过程研究

    基础知识 函数传参存在两种方式,一种是通过栈,一种是通过寄存器.对于x64体系结构,如果函数参数不大于6个时,使用寄存器传参,对于函数参数大于6个的函数,前六个参数使用寄存器传递,后面的使用栈传递.参 ...

  6. Linux基础操作及概念

    Linux基础操作及概念 终端的概念 通常我们在使用 Linux 时,并不是直接与系统打交道,而是通过一个叫做 Shell 的中间程序来完成的,在图形界面下为了实现让我们在一个窗口中完成用户输入和显示 ...

  7. Ubuntu 安装phpmyadmin (9.17第六天)

    PhpMyAdmin 是一个用 PHP 编写的软件工具,可以通过 web方式控制和操作 MySQL 数据库.通过 phpMyAdmin 可以完全对数据库进行操作,例如建立.复制和删除数据等等,这样 M ...

  8. taro编译的时候报 exports.pRimraf = util_1.promisify(rimraf); 错误

    C:\Users\1\AppData\Roaming\npm\node_modules\@tarojs\cli\dist\h5\helper.js:8 exports.pRimraf = util_1 ...

  9. 洛谷 P1776 宝物筛选(多重背包)

    题目传送门 解题思路: 可以转化成0-1背包来做,但暴力转化的话,时间不允许.所以就用了一个二进制划分的方法,将m个物品分成2,4,8,16,32......(2的次方)表示,可以证明这些数通过一定组 ...

  10. 用matplotlib统计数据并画图

    用jupyter来统计数据,画出柱状图 import numpy as np import pandas as pd import matplotlib.pyplot as plt import ma ...