移动端 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);

本文同步分享在 博客“zy1281539626”（CSDN）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。