Wap端自适应和在微信中调整字体大小的问题总结

基本字体单位：px, em，rem, vw，vh

1. px：绝对单位，页面按精确像素展示
2. em：相对单位，基准点为父节点的字体大小。 用例：文字的首行缩进2个字符

<p sytle="text-index:2em">

注意：
如果自身定义了font-size按照自身来计算
浏览器默认字体大小是16px

3. rem：相对单位，相对根节点html的字体大小来计算，css3新加属性。

• 方案1：简单常用版本 以页面基准1080px为例;html font-size值的计算：

(function (doc, win) {
var htmlFont = function () {
var docEl = doc.documentElement,
view = docEl.clientWidth,
height = docEl.clientHeight,
font;
docEl.style.minHeight = height + "px";
font = view / 10.8;
view > 1080 ? docEl.style.fontSize = 100 + "px" : docEl.style.fontSize = font + "px";
};
htmlFont();
win.addEventListener("resize", htmlFont, false)
})(document, window);

• 方案2：高清方案

!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]); flex(100, 1);

优点：
根据设备屏幕的DPR,自动设置最合适的高清缩放。 保证了不同设备下视觉体验的一致性。（上个方案是，屏幕越大元素越大；此方案是，屏幕越大，看的越多）
缺点：
因为屏幕越大，看的越多，所以在示例网站上，不能做到在所有的分辨率上都保持一致的样式

上述方案的样式根据设计稿测量的数据，除以100，加上rem，即1rem=100px

4. vw，vh vw：视窗宽度，1vw等于视窗宽度的1%。
   常用于wap端适配屏幕宽度
   vh：视窗高度，1vh等于视窗高度的1%。
   常用于pc端的全屏展示

微信调整字体

1. 原理
   手机在系统设置和微信设置的通用设置中都提供放大字体功能，这两种设置都可以系统中字体和应用中字体的大小。
   改变font-size，不仅仅是根元素的font-size，所有font-size都会受到影响
2. 解决方案

• 禁止调整浏览器字体大小行为
  • iOS系统
    body设置-webkit-text-size-adjust属性禁止调整字体大小

    body {
      -webkit-text-size-adjust: 100% !important;
      text-size-adjust: 100% !important;
      -moz-text-size-adjust: 100% !important;
    }
    

  • Android系统
    调整浏览器字体是通过改变字体大小,所以可以考虑将字体大小在设置的时候进行等比例缩小。 例如，一个文字希望以10px来进行渲染，当浏览器字体被放大两倍时，此时font-size会变为20px。
    因此我们可以在取到这个放大比例之后，对原样式进行等比缩小，比如将原文字大小设置为5px，渲染的时候就变成了10px。
    做这种处理时注意页面中使用rem为单位。

    <script>
    (function(){
    var $dom = document.createElement('div');
    $dom.style = 'font-size:10px;';
    document.body.appendChild($dom);
    // 计算出放大后的字体
    var scaledFontSize = parseInt(window.getComputedStyle($dom, null).getPropertyValue('font-size'));
    document.body.removeChild($dom);
    // 计算原字体和放大后字体的比例
    var scaleFactor = 10 / scaledFontSize;
    var originRootFontSize = parseInt(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));
    document.documentElement.style.fontSize = originRootFontSize * scaleFactor * scaleFactor + 'px';
    })();
    </script>
    

    注意：如果页面中使用了rem为单位，改变根元素的font-size

优点:
(1)这种方式可以完全还原页面原本的布局样式。
(2)实现简单，只需在页面上加一段css,一段JavaScript。

缺点：
(1)因为通过代码执行完成可能造成页面闪烁，这个问题可以通过提前执行这段代码或者做加载完成前页面暂时不展示解决。
(2)这种方式对那些真正需要放大浏览器字体的用户并不友好。

• 改变布局适应适应这种调整浏览器字体大小行为 优点：
  (1) 不许额外执行JavaScript代码。
  (2)用户可以选择调整浏览器字体,对于有这种需求的用户友好，目前像京东淘宝的移动web端都是使用这种方式。
  缺点：
  (1) 即使通过改变布局该应对变化，但是还是会出现布局错位的情况。
  (2) 实现起来较为复杂，需要在开发时一直考虑这个问题。

注意：如果样式都用的rem计算，那么，每次重置时用js使得根元素的字体大小不变。

4. px是否受到影响
   对于元素宽高来说，因为rem是根据根元素的font-size来计算的，如果不使用rem计算宽高，那么只要不使用rem，图片的宽高将不受影响。
   对于字体来说，只要设置了font-size，使用px一样会影响到字体大小。
5. 实际中的解决办法

示例：在手机端调整字体之后，头部的图片会挤占位置，造成样式错乱，热区也会定位不准

遇到的问题及解决方案

• 浏览器和微信的缓存无法清除，导致样式修改之后没有效果
• 元素宽高、热区是根据rem计算，如果调整字体大小，那么这些样式和位置都要改变 解决办法：
  (1)更改样式之后，刷新，清空缓存
  (2)元素宽高依赖于rem，全局修改为vw的工作量大，所以仅将图片宽高做max-限制

注意：热区需要重新计算，改用vw计算，不过有个问题需要注意，js的计算精度问题，详见wiki.trscd.com.cn/pages/viewp…