移动端未确定高度元素的高度自适应

项目现状：

1：在项目中遇到了tab框中超出内容滚动的效果，页面顶部和底部都已固定高度的元素内容。

2：由于项目用到了天猫的移动端自适应解决方案，传统的屏幕高度-已知高度不适用。

3：天猫的自适应js http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js 用到页面以后，会根据设备的dpr 来生成对应的meta viewport 标签，以下代码简单介绍了他的工作原理，粘贴自https://www.jianshu.com/p/221bebfae266

if (!dpr && !scale) {
var isAndroid = window.navigator.appVersion.match(/android/gi);
var isIPhone = window.navigator.appVersion.match(/iphone/gi);
//devicePixelRatio这个属性是可以获取到设备的dpr的
var devicePixelRatio = window.devicePixelRatio;
if (isIPhone) {
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
dpr = 1;
// 其他设备仍旧使用1倍的方案
}
scale = 1 / dpr;
}

根据以上可以在谷歌开发者模式里注意到切换不同设备的时候，meta viewport标签的内容分别为

iPhone 678及以下：

initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no

iPhone 678 +以及 iPhone X ：

initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no

安卓设备：

initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no

根据以上得出解决方案：

由于是用vue 做的单页面工程；在mounted钩子函数中引用函数 setScrollHeight：

mounted() {
this.setScrollHeight();
},

在methods 中添加函数setScrollHeight：history-tab-content为将设定的元素类名，2.4是页面其他元素高度之和，根据设计稿我的项目中1rem = 37.5rem，这里是说页面其他元素高度之和是2.4rem

setScrollHeight() {
let u = navigator.userAgent;
let isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight ;
console.log("windowHeight--"+windowHeight);
let scrollHeight = 0;
if (isIos) {
if (windowHeight > 1920) { // iphone x,678+
scrollHeight = windowHeight - Math.ceil(112.5 * 2.4);
} else { // 其他iPhone
scrollHeight = windowHeight - Math.ceil(75 * 2.4);
}
} else { // 安卓
scrollHeight = windowHeight - Math.ceil(37.5 * 2.4);
}
$(".history-tab-content").height(scrollHeight);
},

项目最终效果

移动端未确定高度元素的高度自适应