淘寶的flexiable.js 移動端佈局兼容iphoneX，各類大屏，小屏，iphone底部帶導航的全屏的方法（改）

// 大屏適配
var hFont = $('html').css('font-size');
var h = $(window).height();
hFont = hFont.slice(0,-2);
// 屏幕超過1245。顯示大屏配置
if(h/hFont > 16.6){
$("body").addClass("big-page");
}else if(h/hFont < 15.2){
$("body").addClass("small-page");
}

　最近市場上有不少各類寬高不等的手機，之前只有一個iphoneX還好，如今各類樣子的太多。全屏的h5兼容起來特別麻煩。下面我推薦一種我一直在用的方法。

   我是用flexiable.js，來獲取html的font-size來計算內容高度有沒有超出必定高度，而後在父級添加class類來適配。

　拿iphone6的手機設計稿來講尺寸750*1206   若是高度超過1245   那幾乎能夠確定手機屏幕屬於比較大的。

 

　公式：設計稿的高度/（html的字體大小*設備縮放的倍數） > 16.6   =  大屏幕手機，大屏的間距我都是用vh，這樣更容易適配更多款式手機。

　　　　設計稿的高度/（html的字體大小*設備縮放的倍數） > 15.2   =  小屏幕手機，如底部帶導航的華爲，或者微信iphone底部帶導航的都屬於小屏幕。

 

　　附註：設備縮放的倍數 = 設計稿的寬/頁面的寬；

　　　　   16.6 = 1245/75;

　　　　   15.2 = 1140/75;

 

　　公式有不少能夠設定本身想要的高度，若是有更好的方法歡迎留言。

 

　　　注：必需要使用flexiable.js