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