网页加载完毕再显示页面

[Dream4ever]

需求描述

为移动端开发的页面，目前普遍采用下面的代码来设置整体页面的 font-size，这样就可以用 em 来设置各元素的尺寸。
但是随之而来的一个问题就是，由于页面本身默认有自己的 font-size，用下面的代码重新设置 font-size 之后，由于页面先加载的 CSS，后加载的 JS，所以在页面刚加载完成后的一小段时间内，页面上各元素的体积都非常大，用户体验不佳。

document.documentElement.style.fontSize = window.innerWidth / 100 + 'px'

解决方案

为了解决上面的问题，所采用的解决方式为：

1. 给 body 添加一个名为 hidden 的类，在 CSS 中设置该类的内容为 display: none;，让页面刚加载的时候不显示 body。
2. 将上面设置全局 font-size 的代码放在 HTML 的 head 中执行，相当于在开始显示页面内容之前，就已经将全局 font-size 设置好了。
3. 再将下面的 JS 代码放在页面的最后执行，这样等页面全部设置完毕之后，再显示页面，用户就看不到页面元素体积变化的这个过程了。

  document.addEventListener('DOMContentLoaded', function () {
    document.body.classList.remove('hidden')
  }, false)

兼容情况

在 iPhone 4 iOS 7 和 三星平板的 Android 4.4.2 系统上均测试成功，可全面应用。