【微信小程序】底部有安全距离，适配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
					
					1974
					
				

			

		

		

			
				
小程序自适应底部距离

			
		

	



              


  
              

                


	

		

			

				
					
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]...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值