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