移动端 H5 分屏页面适配问题--设计稿比例与设备宽高比例不同

移动端 H5 分屏页面适配问题

单位问题

肯定用rem, 为了方便计算，一般取 1rem=100px（设计稿px）, 需要根据设计稿的宽度设置合适的fontSize, 具体可以看这篇文章 ：移动端根据设计稿宽度适配 px转换相对单位rem

屏幕适配问题

现在的设备宽高五花八门，按照rem 计算总是会出问题，因为设备的宽高比例是不同的，而设计稿的宽高是不变的，如果按照设计稿的尺寸来做，那么必须要求设备的宽高比例和设计稿是相同的，否则就会重叠或者间距过大。针对这个问题可以做一下适配，以下代码可以保证不会发生重叠：

(function (doc, win) {
	var docEl = doc.documentElement,
	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	recalc = function () {
		var clientWidth = docEl.clientWidth;
		var clientHeight = docEl.clientHeight;
		if (clientWidth>=640) {
			clientWidth = 640;
		};
		if (!clientWidth) return;
		// 1rem=100px(设计稿px) 设计稿宽度1080
		var fontSize = 100 * (clientWidth / 1080); 
		var picRate = 0.5625; // 设计稿的宽高比例
		var expectHeight = clientWidth / picRate;
		if(clientHeight < expectHeight){
			var heightDiff = expectHeight - clientHeight;
			var heightDiffRate = heightDiff / clientHeight;
			fontSize = fontSize * (1 - heightDiffRate);
		}
		
		docEl.style.fontSize = fontSize + 'px';
	};
	if (!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);