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

微信小程序适配iPhone X安全距离方案
最新推荐文章于 2025-07-26 10:57:05 发布
原创 最新推荐文章于 2025-07-26 10:57:05 发布 · 5k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #前端 #小程序

本文介绍了在开发微信小程序时如何解决底部安全距离问题，通过使用`env(safe-area-inset-bottom)`计算屏幕安全区域，确保内容不被底部栏覆盖。作者分享了将页面高度设置为`calc(100vh - env(safe-area-inset-bottom))`的解决方案和相关代码片段。

微信小程序开发常常需要适配机型问题，如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元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
【工作总结】——小程序开发中底部弹窗在iPhone X中的安全距离问题

				
			

			

				

					m0_50785976的博客
				

				

					07-01
					
					2479
					
				

			

		

		

			
				
小程序底部弹窗距离底部的安全距离问题

			
		

	



                

            
              



	

		

			

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

				
			

			

				

					m0_56860190的博客
				

				

					03-10
					
					2088
					
				

			

		

		

			
				
小程序自适应底部距离

			
		

	



              


  
              

                


	

		

			

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

				
			

			

				

					qq_50541792的博客
				

				

					04-28
					
					1571
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					夏夜追凉丶的博客
				

				

					06-29
					
					2039
					
				

			

		

		

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

			
		

	



		

			
		



	

		

			

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

				
			

			

				

					Esther_liew的博客
				

				

					08-21
					
					1771
					
				

			

		

		

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

			
		

	





	

		

			

				
					
设置小程序底部安全距离

				
			

			

				

					O_O_______的博客
				

				

					06-01
					
					577
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					03-29
				

			

		

		

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

			
		

	





	

		

			

				
					
微信小程序安全区域适配问题

				
			

			

				

					欲变世界，先变其身
				

				

					06-01
					
					4186
					
				

			

		

		

			
				
在微信小程序开发过程中，有些页面的按钮是需要固定在页面底部（如电商详情页中的加入购物车按钮等），如果将底部栏样式直接设置为bottom：0;，那么在iPhone X、iPhone XR、iPhone 12等机型中，就会出现下图所示问题：按钮区域距离底部太近，可点击区域缩小，用户体验感差。利用IOS新增的 env() 和 constant() 特性即可解决，开发者不需要自己动态计算高度，只需将如下CSS代码添加至样式中：示例代码：

			
		

	





	

		

			

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

				
			

			

				

					heyzqt
				

				

					03-29
					
					6230
					
				

			

		

		

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

			
		

	





	

		

			

				
					
微信小程序如何判断手机底部有横条

					
最新发布

				
			

			

				

					番茄Salad
				

				

					07-26
					
					464
					
				

			

		

		

			
				
微信小程序判断底部横条（Home Indicator）的3种方法：1）通过wx.getSystemInfoSync()比较safeArea.bottom与screenHeight；2）异步获取wx.getSystemInfo()；3）CSS使用env(safe-area-inset-bottom)。iOS设备用safeArea最准确，安卓需计算高度差，开发工具可模拟效果。推荐使用safeArea对比法或CSS安全区域变量，兼顾准确性和便捷性。

			
		

	





	

		

			

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

				
			

			

				

					10-16
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					10-16
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					weixin_45762162的博客
				

				

					10-10
					
					682
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					2301_77875326的博客
				

				

					06-28
					
					462
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					qq_48795670的博客
				

				

					08-25
					
					1292
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					weixin_47756693的博客
				

				

					07-13
					
					426
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					donghua201的博客
				

				

					09-25
					
					2621
					
				

			

		

		

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

			
		

	





	

		

			

				
					
微信小程序：自定义头部胶囊（navigationStyle=custom）/底部安全距离env(safe-area-inset-bottom)及手机适配

				
			

			

				

					彭世瑜的博客
				

				

					02-21
					
					8154
					
				

			

		

		

			
				
自定义顶部栏之后，通过微信小程序给出的接口获取几个位置坐标（单位都是: px）
用到的接口及其文档

取菜单按钮（右上角胶囊按钮）的布局位置信息 Object wx.getMenuButtonBoundingClientRect()
获取系统信息 Object wx.getSystemInfoSync()

获取到的值：

灰色：胶囊底部坐标 menuInfo.bottom
天空蓝：胶囊顶部坐标 menuInfo.top
绿色：状态栏高度 systemInfo.statusBarHeight

直观显示如下

			
		

	





	

		

			

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

				
			

			

				

					weixin_38685496的博客
				

				

					03-27
					
					2705
					
				

			

		

		

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

			
		

	





	

		

			

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

				
			

			

				

					01-24
				

			

		

		

			
				
### 微信小程序多机型适配方案最佳实践  #### 一、开发环境准备 为了确保不同终端上的一致性和稳定性，在开始编写代码之前，需准备好统一的开发工具和模拟器。这有助于开发者提前发现并解决可能存在的兼容性问题[^1]...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值