// 大屏適配
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