问题缘由：做文章详情页的时候，文字多了一点字体就放大了，真的是奇了怪了。

问题重现

一段文字的时候

两段文字的时候

很明显，字体放大了很多。

疑点

meta标签缩放的问题

最近正好遇到处理retain屏1px的问题，然后采用的是自动修改meta标签。



/**

 * Created by jarjune on 2017/7/26.

 */

(function (doc, win) {

  var scale = 1.0;

  var ratio = 1;

  if (window.devicePixelRatio == 2) {

    scale *= 0.5;

    ratio *= 2;

  }

  if (window.devicePixelRatio == 3) {

    scale *= (1/3);

    ratio *= 3;

  }

  var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale + ',' + ' minimum-scale=' + scale + ', width=device-width,' + ' user-scalable=no" />';

  document.write(text);

  var docEl = doc.documentElement

  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'

  var recalc = function () {

    var clientWidth = docEl.clientWidth

    if (!clientWidth) return

      docEl.style.fontSize = 100 * (clientWidth / 750)  + 'px'

  }

  if (!doc.addEventListener) return

  recalc()

  win.addEventListener(resizeEvt, recalc, false)

  // doc.addEventListener('DOMContentLoaded', recalc, false)

})(document, window);

当window.devicePixelRatio == 1时，没有发现字体自动放大的问题。

当window.devicePixelRatio == 2或者window.devicePixelRatio == 3时，问题就出现了。

科学解释【Font Boosting】

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

解决方案

  1. <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, user-scalable=no"> 缩放比设为1，至于1px之类的问题可以采取其他方案解决。
  2. 给元素指定高度(想想是不太现实的)，不过设置max-height:99999px也有效。
  3. 设置text-size-adjust：none，不过大部分浏览器都不兼容。

【2018-10-21补】

问题代码

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>测试</title>

	<script type="text/javascript" src="js/rem.js"></script>

	<link rel="stylesheet" type="text/css" href="css/base.css">

</head>

<body>

<p style="font-size: .28rem;">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测</p>

<p style="font-size: .28rem;">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测</p>

</body>

</html>

经过又一次测试发现，同样的代码，在安卓上文字会自动变大，在ios的3x屏上文字会自动变小，

上文说的设置max-height:99999px只是在安卓上有用，在3x屏上，需要设置width为一个固定的值才有效，比如7.5rem，注意！设置100%也无效！

修改后的代码

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>测试</title>

	<script type="text/javascript" src="js/rem.js"></script>

	<link rel="stylesheet" type="text/css" href="css/base.css">

</head>

<body>

<p style="font-size: .28rem; max-height: 99999px; width: 7.5rem;">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测</p>

<p style="font-size: .28rem; max-height: 99999px; width: 7.5rem;">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测</p>

</body>

</html>

最终方案

  1. <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, user-scalable=no"> 缩放比设为1，至于1px之类的问题可以采取其他方案解决。
  2. height设置max-height:99999px，width设置固定大小。
  3. 设置text-size-adjust：none，不过大部分浏览器都不兼容。

移动端开发，文字增加，字体自动放大(font boosting)的更多相关文章

  1. pc页面在移动端浏览时部分字体放大，与pc字体大小不一致(Font Boosting)

    最近做一个页面时,需要pc的页面在移动端浏览时保持pc的样式缩小.但是发现部分文字被放大了.看上去特别诡异.如下图 绿框是PC端查看时的正常样式,红框是移动端看的字体放大的诡异样式 是什么原因呢? 后 ...

  2. kotlin3-IdeaIU编辑器字体自动放大缩小

  3. 大前端全栈CSS3移动端开发

    作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正 本节课学习视频来源:https://ww ...

  4. ISO端form表单获取焦点时网页自动放大问题

    iOS端网页form表单输入信息时,网页自动放大,这是因为meta标签 刚开始的时候meta标签是 <meta name="viewport" content="w ...

  5. 29.html5 移动端开发总结

    手机与浏览器 浏览器: 移动端开发主要针对手机,ipad等移动设备,随着地铁里的低头族越来越多,移动端开发在前端的开发任务中站的比重也越来越大.各种品牌及尺寸的手机也不尽相同.尺寸不同就算了分辨率,视 ...

  6. html5 移动端开发

    移动端开发总结     目录 1.手机与浏览器 2.Viewport(视窗) 3. 媒体查询 4.px,em,rem,pt 5.设备像素比devicePixelRatio 6.移动web中的图标及字体 ...

  7. 01-移动端开发教程-CSS3新特性

    1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...

  8. web移动端开发技巧与注意事项汇总

    一.meta的使用 1.<meta name="viewport" content="width=device-width,initial-scale=1.0, m ...

  9. web移动端开发技巧

    一.meta的使用 1.<meta name="viewport" content="width=device-width,initial-scale=1.0, m ...

随机推荐

  1. 剑指offer-删除链表中重复的节点

    题目描述   在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4->4->5 处 ...

  2. OpenShift实战(三)：OpenShift持久化存储Registry

    1.查看Registry组件的DC关于volume的定义 可以看到registry-storage这个挂载点被指向了一个/registry目录,使用的是empty directory,即数据保存在计算 ...

  3. 使用 slf4j抽象日志层 和 其他日志实现对接

    前言 如果你正在提供一个开源的Java-jar,那么让你的项目仅依赖slf4j-api然后让你的用户在他们开发和运营环境中选择任意的日志实现绝对是个好想法,.作为终端用户,他们可以快速地从上面提到的日 ...

  4. IDE-Ecplise-代码注释 模版 编码规范 配色

    说明: 代码注释主要用于方便代码后期维护,编码规范,增加代码阅读性和维护性.因网上看到的很多博客中片段局多,故整理后重写一篇,方便交流学习. 先看下加过注释模版后的效果. 如上图所示,创建类,方法和继 ...

  5. TR069网管协议应用在Android系统开发的前言

    随着智能平台的终端设备不断发展,迫切需要我们解决这些终端的管理问题,而现有的终端统一管理平台已经成熟,主要是基于tr069协议网管平台,比如华为的itms等终端管理平台.所以,这篇文章就是为了实现一种 ...

  6. Android学习——NDK交叉编译

    原创作品,转载请注明出处,严禁非法转载.如有错误,请留言! email:40879506@qq.com 一. 环境1.GNU/Linux Ubuntu12.04操作系统(x86) 二. 下载NDK安装 ...

  7. c#获取网络时间并同步本地时间

    通过TCP形式来获取NTP时间.主要代码如下: [DllImport("kernel32.dll")] private static extern bool SetLocalTim ...

  8. anaconda的使用

    1. 查看已安装的库 pip list conda list 其中,pip list 只能查看库,而 conda list 则可以查看库以及库的版本 2. 安装或更新库 pip install scr ...

  9. requests-post请求

    post与get方法的区别在于post需要提交一些数据以备处理. 在requests里面非常简单,headers,data都是直接加进去就可以了 # requests.post提交表单# 有些网站使用 ...

  10. 极速下载百度网盘-吴水成老师的-dubbo课程

    极速下载百度网盘-吴水成老师的-dubbo课程,极速下载百度网盘-吴水成老师的-dubbo课程,极速下载百度网盘-吴水成老师的-dubbo课程,极速下载百度网盘-吴水成老师的-dubbo课程 先看主目 ...