文件名称：iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配 ...
文件大小：178KB
文件格式：PDF
更新时间：2024-04-18 10:37:50
iPhoneX,安全,区域,Safe,Area,底部,小黑条
最近写小程序时，遇到了 iPhoneX 底部小黑线与内容重叠的问题，实际上是iPhoneX安全区域的适配问题，了解清楚这个问题花了挺多时间的，也实操出了结果，忍不住来总结总结。 本文目录 前言 · 内容与小黑线重叠情况说明 1.安全区域含义 2.微信小程序适配iPhoneX底部小黑条(Home Indicator) （1）适配方案一：使用已知底部小黑条高度34px/68rpx来适配（不推荐） （2）适配方案二：使用微信官方API，getSystemInfo()中的safeArea对象进行适配（推荐） （3）适配方案三：使用苹果官方推出的css函数env()、constant()来适配 （推荐）