H5移动端适配iPhone X/XS/XS Max底部导航栏+底部栏

陈小浩同学

已于 2022-03-01 14:52:20 修改

阅读量2.8k

点赞数 3

分类专栏：前端文章标签： css3 uni-app html5

于 2021-10-21 17:13:01 首次发布

本文链接：https://blog.csdn.net/xiaodouxuan11/article/details/120890406

版权

15 篇文章 2 订阅

订阅专栏

博主是用uniapp开发的一个商城，本身就做了tabbar兼容；打包上线后，发现在其他浏览器下都可以正常显示，唯独微信浏览器，我真的是***；如下就是解决方案

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">

下面这个代码哪里需要底部定位就放在那里；常用在position:fixed下；如果是uniapp开发的，tabbar是不需要加这个的，但是其他的还是需要加的

padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2/
padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>11.2/

height: calc(88rpx + constant(safe-area-inset-top)); // 兼容 IOS<11.2/
height: calc(88rpx + env(safe-area-inset-top));// 兼容 IOS>11.2/

关注