【微信小程序】底部有安全距离，适配iphone X等机型的解决方案

最新推荐文章于 2025-06-03 11:43:03 发布
最新推荐文章于 2025-06-03 11:43:03 发布
阅读量4.8k 收藏 6
点赞数
CC 4.0 BY-SA版权
分类专栏： 微信小程序 文章标签： 微信小程序 前端 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/MinfCONS/article/details/126069811
本文介绍了在开发微信小程序时如何解决底部安全距离问题，通过使用`env(safe-area-inset-bottom)`计算屏幕安全区域，确保内容不被底部栏覆盖。作者分享了将页面高度设置为`calc(100vh - env(safe-area-inset-bottom))`的解决方案和相关代码片段。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

微信小程序开发常常需要适配机型问题，如iPhone X/XR等机型，底部有黑色横杠（称为安全距离），这时如果直接加css样式fixed是不行的，不会计算底部安全距离，而会与之重叠。

// fixed
.box {
   
   
	position: fixed;
	bottom: 0;
}

在这里插入图片描述
在这里插入图片描述

经过搜索后，我们知道env(safe-area-inset-bottom)能计算出安全距离，我想到一个通用的写法，具体做法是将页面高度page的高度限制为屏幕高度减去安全距离，代码实现是calc(100vh- env(safe-area-inset-bottom))

完整代码如下：


                

                
                
        

    

    
  


        

            

                      
                        最低0.47元/天 解锁文章
                        

                          
200万优质内容无限畅学

                          
                        

                      
            

        


    



                



	

		

			

				
					
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配

				
			

			

				

					heyzqt
				

				

					03-29
					
					6122
					
				

			

		

		

			
				
最近写小程序时，遇到了 iPhoneX 底部小黑线与内容重叠的问题，实际上是iPhoneX安全区域的适配问题，了解清楚这个问题花了挺多时间的，也实操出了结果，忍不住来总结总结。
本文目录
前言
       · 内容与小黑线重叠情况说明
1.安全区域含义
2.微信小程序适配iPhoneX底部小黑条(Home Indicator)
    ...

			
		

	



                

            
              



	

		

			

				
					
微信小程序 ---- iPhone X 以上机型留出底部安全距离

				
			

			

				

					m0_56860190的博客
				

				

					03-10
					
					1975
					
				

			

		

		

			
				
小程序自适应底部距离

			
		

	



              


  
              

                


	

		

			

				
					
CSS设置移动端页面底部安全距离

					
最新发布

				
			

			

				

					m0_68716504的博客
				

				

					06-03
					
					627
					
				

			

		

		

			
				
如图：在开发微信小程序时遇到的按钮被iOS设备底部黑线遮挡的问题，以及如何利用CSS中的env(safe-area-inset-bottom)属性来创建安全区域，避免内容被遮挡。通过将该属性应用到padding或height上，成功解决了问题。值，用于设置底部安全距离。它表示使用环境变量来获取底部安全距离的值。当使用环境变量时，需要使用env()函数来引用具体的环境变量。env(safe-area-inset-bottom)是一个。

			
		

	





	

		

			

				
					
微信小程序 - iphone适配底部安全距离

				
			

			

				

					qq_50541792的博客
				

				

					04-28
					
					1452
					
				

			

		

		

			
				
基础库 2.20.1 开始支持，低版本需做兼容处理。小程序插件：支持，需要小程序基础库版本不低于2.21.3微信 Windows 版：支持微信 Mac 版：支持在这里放一下api地址用到的参数属性类型说明pixelRationumber设备像素比safeAreaObject在竖屏正方向下的安全区域。部分机型没有安全区域概念，也不会返回 safeArea 字段，开发者需自行兼容number安全区域右下角纵坐标number屏幕高度，单位pxnumber可使用窗口宽度，单位px。

			
		

	



		

			
		



	

		

			

				
					
微信小程序自动计算底部安全距离

				
			

			

				

					夏夜追凉丶的博客
				

				

					06-29
					
					1953
					
				

			

		

		

			
				
微信小程序自动计算底部安全距离

			
		

	





	

		

			

				
					
设置小程序底部安全距离

				
			

			

				

					O_O_______的博客
				

				

					06-01
					
					526
					
				

			

		

		

			
				
【代码】设置小程序底部安全距离。

			
		

	





	

		

			

				
					
小程序适配底部安全距离（小黑条）

				
			

			

				

					weixin_45762162的博客
				

				

					10-10
					
					594
					
				

			

		

		

			
				
对于支持CSS环境函数的设备，可以使用env()和constant()来适配底部安全距离。老生常谈的问题了，直接上代码。

			
		

	





	

		

			

				
					
小程序以及H5页面上IphoneX底部安全区域小黑条适配问题

				
			

			

				

					03-29
				

			

		

		

			
				
在苹果 iPhoneX 、iPhone XR等机型上，物理Home键被取消，改为底部小黑条替代home键功能,从而导致吸底元素会被小黑条遮挡覆盖的问题 解决方案 使用已知底部小黑条高度为34px/68rpx机型适配(不建议) 使用微信官方API...

			
		

	





	

		

			

				
					
微信小程序从入坑到放弃二十二：完美兼容安卓和ios手机的底部评论框

				
			

			

				

					yilingsj的博客
				

				

					06-20
					
					1411
					
				

			

		

		

			
				
摘要：
不管是在普通的H5页面还是在微信小程序中，底部输入框一直是一大难题，因为键盘会在某些情况下遮挡信输入框一部分！值得庆幸的是：在微信小程序中，我们可以通过监听bindfocus来获取键盘的高度，动态算出输入框距离屏幕顶部的距离…

			
		

	





	

		

			

				
					
【微信小程序开发零基础入门】——微信小程序入门

					
热门推荐

				
			

			

				

					m0_52435951的博客
				

				

					02-17
					
					1万+
					
				

			

		

		

			
				
微信小程序入门一、小程序介绍1.1.什么是小程序？1.2. 微信⼩程序历史1.3.小程序可以干什么？1.4.疯狂的微信⼩程序1.5. 还有其他的⼩程序 不容忽视1.6.  官⽅微信⼩程序体验二、小程序开发资料三、第⼀个微信⼩程序四、开发小程序储备知识五、小程序特点六、wxml 语法七、小程序 API八、小程序特点九、小程序支付流程
一、小程序介绍
1.1.什么是小程序？


2017 年度百度百科十大热词之一
微信小程序，简称小程序，英文名 Mini Program，是一种不需要下载安装即可使用的应用
( 

			
		

	





	

		

			

				
					
微信小程序 iPhoneX底部安全区域（底部小黑条）适配(一分钟解决)

				
			

			

				

					10-16
				

			

		

		

			
				
iPhone X   对于微信小程序的tabbar来说，会被底部小黑条覆盖，需要处理，大概思路是，得到手机型号、分别判断样式。这篇文章主要介绍了微信小程序 iPhoneX底部安全区域（底部小黑条）适配问题,需要的朋友可以参考下

			
		

	





	

		

			

				
					
小程序根据手机机型设置自定义底部导航距离

				
			

			

				

					10-16
				

			

		

		

			
				
主要为大家详细介绍了小程序根据手机机型设置自定义底部导航距离，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
uniapp 微信小程序，底部安全距离适配，针对安卓iPhone不同型号手机

				
			

			

				

					Esther_liew的博客
				

				

					08-21
					
					1551
					
				

			

		

		

			
				
微信小程序 底部安全距离适配

			
		

	





	

		

			

				
					
微信小程序移动端安全距离

				
			

			

				

					weixin_47756693的博客
				

				

					07-13
					
					389
					
				

			

		

		

			
				
【代码】微信小程序移动端安全距离。

			
		

	





	

		

			

				
					
微信小程序适配iphoneX，XR，12及以上，获取底部安全区域

				
			

			

				

					donghua201的博客
				

				

					09-25
					
					2391
					
				

			

		

		

			
				
iphone x及以上的异形屏top高度为44px（或以上），非异形屏为20px。先判断是否为异形屏，如果是，获取到底部小黑条区域的高度。在页面设置底边距padding-bottom/margin-bottom，把内容区域隔开。小黑条区域高度=屏幕高度-安全区域的bottom值，安全区域指的是内容可见区域注意小黑条区域的高度单位是。

			
		

	





	

		

			

				
					
全局设置小程序底部安全距离

				
			

			

				

					qq_48795670的博客
				

				

					08-25
					
					1158
					
				

			

		

		

			
				
通过以上步骤，您已经成功地在全局设置了底部安全距离，而无需在每个页面中单独添加。这样，所有页面的底部都将具有相同的底部安全距离。要在全局设置底部安全距离，而不是在每个页面中添加，您可以通过修改小程序的全局样式文件来实现。打开小程序的代码库，并找到全局样式文件。通常情况下，该文件位于小程序的根目录下，命名为。

			
		

	





	

		

			

				
					
小程序底部安全距离（直接用）

				
			

			

				

					2301_77875326的博客
				

				

					06-28
					
					428
					
				

			

		

		

			
				
.safe-area-inster-bottom{
    height: env(safe-area-inset-bottom);
  }

			
		

	





	

		

			

				
					
微信小程序页面底部安全距离样式设置

				
			

			

				

					weixin_38685496的博客
				

				

					03-27
					
					2499
					
				

			

		

		

			
				
在微信小程序中设置底部安全距离可以使用CSS中的。以下是一个示例CSS代码。

			
		

	





	

		

			

				
					
微信小程序如何适配各种机型

				
			

			

				

					01-24
				

			

		

		

			
				
### 微信小程序多机型适配方案最佳实践

#### 一、开发环境准备
为了确保不同终端上的一致性和稳定性，在开始编写代码之前，需准备好统一的开发工具和模拟器。这有助于开发者提前发现并解决可能存在的兼容性问题[^1]。

#### 二、响应式布局与样式适配
采用相对单位`rpx`代替固定像素值来定义宽度高度等尺寸参数，使得页面元素能够根据不同屏幕分辨率自动调整大小。通常情况下，UI设计师提供的设计稿是以750px作为基准宽度绘制而成，因此可以直接按照比例转换为相应的`rpx`数值应用到实际项目当中[^2]。

```css
/* 示例 */
.container {
    width: 750rpx; /* 对应于原稿中的750px */
}
```

#### 三、组件适配
对于一些特殊形状或位置固定的控件（如底部导航栏），可以利用CSS3新增的安全区域插槽(`safe-area-inset`)特性来进行针对性处理。例如针对iPhone X及以上版本手机存在圆角屏以及刘海屏所带来的视觉干扰情况，可以通过设置`.button-box`类下的内边距属性实现自适应效果：

```css
.button-box {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
```
上述代码片段展示了如何通过双保险的方式——即同时指定两种不同的语法形式以确保最大范围内的浏览器支持程度——从而有效防止因硬件差异而导致的内容被截断现象发生[^3]。

#### 四、API调用适配
考虑到各平台间可能存在功能上的细微差别，建议在发起网络请求或其他涉及操作系统底层交互的操作前先检测当前运行环境的具体特征，并据此作出适当的选择。比如某些特定接口仅适用于Android而iOS则提供了替代选项；又或者是同一项服务在不同品牌之间有着不一样的访问路径等等。

#### 五、数据展示优化
当面对多种多样且规格各异的目标群体时，合理规划信息呈现方式就显得尤为重要了。一方面要保证核心内容清晰可见不受任何因素影响；另一方面也要尽可能满足个性化需求给予用户良好的体验感受。这就要求我们在编码过程中充分考虑字体颜色对比度、图片加载策略等方面的影响因子。

#### 六、调试与测试环节
最后但同样重要的是，务必经过严格的联调过程验证各项措施的有效性。借助官方提供的真机预览功能或是第三方云测服务平台都可以很好地完成这项工作。只有经历了全面细致的质量把控之后才能真正意义上做到跨设备无缝衔接的效果。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值