问题遇到的现象和发生背景
想要固定按钮在底部导航栏上面！！结果因为iphonex有个自适应的navbar高度变化，现在没办法很好把控bottom距离
问题相关代码，请勿粘贴截图
1条回答 默认 最新
关注在需要适配的页面内使用 css 常量 constant(safe-area-inset-bottom)、env(safe-area-inset-bottom) 来适配
为页面底部增加内边距：
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);如有帮助，麻烦点个【采纳此答案】，谢谢啦
本回答被题主选为最佳回答 , 对您是否有帮助呢?评论 打赏解决 1无用举报
分享
- 2024-01-23 19:42葫芦娃y的博客 微信小程序底部按钮适配iPhoneX以上，显示遮挡问题
- 2021-03-29 16:512. 微信小程序适配iPhoneX底部小黑条： - 方案一：使用已知底部小黑条高度34px/68rpx来适配。这种方法不够灵活，因为不同设备可能有不同的安全区域高度，且依赖于手动设置，容易出错。 - 方案二：利用微信官方提供...
- 2019-10-25 13:32前端老码农的博客 (modelmes.search('iPhone X') != -1 ) { that.globalData.isIphoneX = true } } }) }, 在需要引用的页面js文件中onload方法里获取全局变量 let isIphoneX = app.globalData....
- 2020-11-20 17:55饥饿的程序媛的博客 H5 适配iPhoneX/XS 安全区 做一个严谨的页面还原稿 一、适配的含义 可视、可操作区域是在安全区域内。 没有做适配的情况： 二、安全区的含义 不被圆角、齐刘海、底部小黑条（Home Indicator）遮挡的长方形。 三...
- 2023-06-16 16:53葫芦娃y的博客 微信小程序适配手机，底部tabbar按钮适配phoneX以上
- 2022-07-11 15:21令狐张豪的博客 问题点：小程序底部导航如果写固定的位置在安卓系统上是没有问题的，但是在iPhone X及以上机型有安全区域的机器上就显得有点太靠下了，我们可以写成动态的： 解决思路：判断是Android 还是 iOS，底部导航默认bottom...
- 2025-06-25 20:47爱宇阳的博客 导致吸底按钮被遮挡的问题，提出基于CSS环境变量env()和constant()的安全区域适配方案。详细介绍了三种实现方式：1）在固定定位元素中使用padding-bottom；2）通过calc()动态调整高度；3）独立占位层组件化方案。...
- 2021-09-09 19:51@Winner的博客 34) { that.globalData.isIPhoneX = true that.isIPhoneX = true } // // 根据 model 进行判断 // if (res.model.search('iPhone X') != -1) { // that.globalData.isIPhoneX = true // that.isIPhoneX = true // } ...
- 2021-06-15 21:15ggxr00的博客 微信小程序适配安全区 // 高度固定 .wrap { width: 100%; height: calc(100rpx + constant(safe-area-inset-bottom)); /*兼容 IOS<11.2*/ height: calc(100rpx + env(safe-area-inset-bottom)); /*兼容 IOS>...
- 2020-12-29 14:29带风的少年的博客 padding-bottom:calc(10px + env(safe-area-inset-bottom)/2);
- 没有解决我的问题, 去提问
问题事件
系统已结题
12月19日
已采纳回答
12月11日-
创建了问题
12月11日