ios和安卓机底部按钮适配

最新推荐文章于 2023-12-11 14:16:00 发布

开心你就笑！！哈哈哈

最新推荐文章于 2023-12-11 14:16:00 发布

阅读量1.1k

点赞数

文章标签：底部导航适配 ios和安卓

本文链接：https://blog.csdn.net/weixin_38673922/article/details/129582428

版权

文章讲述了在iOS设备上，由于iPhoneX系列及以后机型的底部小黑条导致的微信小程序适配问题。原因是这些设备不再有物理Home键，小黑条被计算在屏幕高度内，而安卓机则忽略此区域。解决方案是利用苹果提供的CSS样式`constant(safe-area-inset-bottom)`和`env(safe-area-inset-bottom)`来确保内容不会被小黑条遮挡。

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

一、 ios的效果图（小黑条遮住按钮）

在这里插入图片描述

二、原因分析

由于用户的机型不同，微信小程序底部的高度计算规则也不同，现在的机型分为两种，一种是安卓机，一种是ios机型，安卓机的适配在开发者工具上的预览机型相当于iphone5，而ios机型在开发者工具上的预览相当与iphone12或以上，这其实只是一个预估值，可以将它统称为iphoneX，导致机型不适配的原因是因为苹果 iPhoneX 、iPhone XR等设备上，物理Home键被取消，改为底部小黑条替代home键功能。

在安卓机型上是直接忽略掉该小黑条的，而iPhoneX及以上设备则会计算该小黑条的高度，这就导致一套css方案在不同的机型上会有适配问题

三、解决办法

使用苹果官方提供的css样式：

<view>
   <view class="bottomCase">保存</view>
   <view class="isIPhoneXRegexBottom"></view>
</view>

/* 安全距离-全局的style文件，在页面直接调用即可 */
.isIPhoneXRegexBottom {
  	padding-bottom: constant(safe-area-inset-bottom) !important;   /*兼容 IOS<11.2*/
  	padding-bottom: env(safe-area-inset-bottom) !important;  /*兼容 IOS>11.2*/
  	background-color: transparent;  /* 透明色 */
}