开发一个移动端页面，需要等比例缩放，于是使用了 rem 单位，通过动态改变 html 元素 font-size 属性来实现页面缩放

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
html {
  //以 100px 为基数设置大小
  font-size: 100px;
}

.content {
  position: relative;
  left: 0;
  top: 0;
  width: 8rem; // 800px
  height: 14.24rem;
  background-image: url("./images/ceyice-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.index-title {
  position: absolute;
  top: 1.46rem;
  left: 50%;
  width: 4.95rem;
  height: 3.9rem;
  margin-left: -4.95rem/2;
  background-image: url("./images/index-title.png");
  background-size: cover;
}

html 初始设置为 100px 是为了避免 Chrome 下最小字体为 12px 导致页面错乱的问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 动态设置 html 元素 font-size
(function(win) {
	var doc = win.document;
	var docEl = doc.documentElement;
	var tid;
	function refreshRem() {
		var docW = docEl.getBoundingClientRect().width;
		// html设置字号，800 是原始psd文件的宽，100 是设置的初始 html 字体大小
		docEl.style.fontSize = docW / 800 * 100 +'px';
	}
	refreshRem();
	//横屏时重设 html 的 font-size
	win.addEventListener('resize', function() {
		clearTimeout(tid);
		tid = setTimeout(refreshRem, 300);
	}, false);
})(window);

结果偶遇一个超级奇葩的bug，安卓手机上页面不会缩放，iPhone下正常。

于是各种改 viewport ，各种查 rem 兼容性 ，查淘宝flexible 解决方案，各种…

开始以为是安卓手机的原因，最后发现只有 UC 会这样…真是哔了狗

原因是UC浏览器必须在页面加载完成前设置 html 元素的 font-size 属性， rem 单位才会生效，于是只要把上面那段代码放到 head 标签中就好了 ：）

这就是我找了一下午的 bug ，手动再见…