移動端 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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。