H5移动端网页字体大小自适应

现手机屏幕尺寸大小不一，HTML编写的页面在移动端在不同尺寸屏幕下适配容易出问题，所以在实际的网页编写中需要根据屏幕的尺寸来调整字体或间距大小，以达到自适应效果。在编写移动端网页时，我用的单位是rem，该单位比较兼容浏览器。
移动端页面在显示时，需要先设置一下浏览器可视化区域，则不会出现屏幕有横向滚动条的效果，增加用户体验，代码展示：

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no,uc-fitscreen=yes">

说明：
initial-scale：设置页面的初始缩放值
maximum-scale：允许用户的最大缩放值
minimum-scale：允许用户的最小缩放值
user-scalable：是否允许用户缩放，yes为允许，no为不允许
uc-fitscreen：适配UC

在实际编写中要View的with尽可能用百分比，避免用固定值，以达到不同屏幕下留太多空白或者超出的情况。
以下代码为不同屏幕下字体大小适配的js，创建一个js文件，将代码放到文件中，在需要用的网页中进入js即可。

(function (width) {
  var doc = width.document,
    element = doc.documentElement,
    i = 640,
    d = i / 100,
    o = "orientationchange" in width ? "orientationchange" : "resize",
    a = function () {
      var width = element.clientWidth || 320;
      width > 640 && (width = 640);
      element.style.fontSize = width / d + "px"
    };
  doc.addEventListener && (width.addEventListener(o, a, !1), doc.addEventListener("DOMContentLoaded", a, !1))
})(window);