小程序为什么不适配ios底部

小程序为什么不适配iOS底部

在当前的小程序开发中，很多开发者都会遇到这样一个问题：为什么我们的小程序在iOS设备上底部按钮会存在适配问题？本文将为大家解析这个问题背后的原因以及解决方法。

原因分析：

1. 机型差异：微信小程序底部的高度计算规则在不同的机型上有所不同。目前，市面上主要有两种机型，一种是安卓机，一种是iOS机型。安卓机在开发者工具上的预览机型相当于iPhone5，而iOS机型在开发者工具上的预览相当于iPhone12或以上，我们可以将它们统称为iPhoneX。

2. 底部小黑条问题：在iPhoneX、iPhoneXR等设备上，物理Home键被取消，改为底部小黑条替代Home键功能。安卓机型上直接忽略掉该小黑条，而iPhoneX及以上设备则会计算小黑条的高度。这就导致了一套CSS方案在不同的机型上会有适配问题。

解决办法：

1. 使用苹果官方提供的CSS样式：

保存

安全距离-全局的style文件，在页面直接调用即可：

.isIPhoneXRegexBottom

padding-bottom：constant(safe-area-inset-bottom)！important；
padding-bottom：env(safe-area-inset-bottom)！important；
background-color：transparent；

效果图：

安卓机：

iOS：

通过以上方法，我们可以解决小程序在iOS设备底部按钮的适配问题。希望本文对您有所帮助！