当前位置： 移动技术网 > IT编程>脚本编程>vue.js > uniapp-iPhoneX和iPhoneX Max 的底部小黑条挡住底部tab

uniapp-iPhoneX和iPhoneX Max 的底部小黑条挡住底部tab

2020年07月24日  | 移动技术网IT编程  | 我要评论

1、在template.h5.html中添加viewport-fit=cover

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">

2、在App.vue中引入scss

<style lang="scss">
	/*每个页面公共css */
	@import '/css/common.scss';
</style>

3、在common.scss文件中设置body样式

/*坑：解决iphoneX等大屏手机底部小黑条挡住tab的解决方法：安全区域距离底部边界距离env() 跟 constant() 需要同时存在，而且顺序不能换。*/
/* #ifdef H5 */
body {
  padding-bottom: constant(safe-area-inset-bottom);/* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}
/* #endif */

 

本文地址：https://blog.csdn.net/LzzMandy/article/details/107514847

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网