移动端适配.md

移动端适配

移动端适配方案

概念

visual viewport 可见视口 屏幕宽度
layout viewport 布局视口 DOM宽度
ideal viewport 理想适口：布局视口就是可见视口
设备宽度(visual viewport)与DOM宽度(layout viewport), scale的关系为： （visual viewport）= （layout viewport）* scale
获取屏幕宽度(visual viewport)的尺寸：window.innerWidth/Height。
获取DOM宽度(layout viewport)的尺寸：document.documentElement. clientWidth/Height

750设计稿，以iPhone6为标准，font-size:100px, 其他换算除以100即可。（dpr == 2） viewport 设置等比缩放。

• 根据屏幕大小及dpi调整缩放和大小

//根据屏幕大小及dpi调整缩放和大小
(function() {
	var scale = 1.0;
	var ratio = 1;
	if (window.devicePixelRatio >= 2) {
		scale *= 0.5;
		ratio *= 2;
	}
	var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', width=device-width, user-scalable=no" />';
	document.write(text);
	document.documentElement.style.fontSize = 50 * ratio + "px";
})();