淘宝的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

 

 

转载于:https://www.cnblogs.com/loren1995/p/8194302.html