ccjuice
ccjuice
  • 发布:2017-12-13 14:50
  • 更新:2020-08-06 21:36
  • 阅读:8381

MUI底部tab遮挡 iphoneX适配

分类:MUI
mui

mui底部tab 拼合而成的页面
var subpages = ['index.html', '../circle/circle.html', '../noopsyche/noopsyche.html', '../personalCenter/personCenter.html'];
var subpage_style = {
top: '0px',
bottom: '51px',
styles: {
"render": "always",//一直渲染
}
};


iphoneX中出现遮挡底部tab现象,如图,采用js判断屏幕大小方式改变bottom值
if(/iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)){
subpage_style = {
top: '0px',
bottom: '85px',//34px
styles: {
"render": "always",//一直渲染
}
};
}

疑问:
设置viewport-fit=cover,并设置padding-bottom: constant(safe-area-inset-bottom);等四个值并未出现理想效果。
参考链接:
https://cloud.tencent.com/community/article/686372
https://segmentfault.com/q/1010000011998222/

1 关注 分享
梦里追逐

要回复文章请先登录注册

小明子

小明子

同问
2020-08-06 21:36
1***@qq.com

1***@qq.com

感谢,第一篇链接文章很详细,缺少个x 测试
2019-10-16 09:15
ccjuice

ccjuice (作者)

回复 波克比 :
模拟机 你值得拥有 你可能缺的是苹果本儿
2018-12-20 15:43
波克比

波克比

缺个iPhone X测试~~
2018-07-28 09:48
v***@163.com

v***@163.com

您这个问题后来解决了吗?也遇到同样的问题。
2018-06-16 16:32