如何在h5和小程序中适配iphoneX及更高版本全面屏底部的安全区

关键词 IOS

前言

在项目开发的过程中,需要IOS全面屏底部安全区适配

步骤

  1. h5需要设置页面属性:

2.在body添加如下属性

复制代码
 body {
    padding-bottom:constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
    padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
  }

后言

最近工作很忙,没有时间更新。希望本文会对你有所帮助,如果有什么问题,可在下方留言沟通

相关推荐
AI源码16 小时前
在线考试小程序
小程序·notepad++
2501_9160088919 小时前
iPhone 设备信息查看,用 KeyMob 看型号、序列号、电池健康和 UDID
android·ios·小程序·https·uni-app·iphone·webview
云-缩影2 天前
做微信小程序,自建服务器还是用云托管:技术选型对比
服务器·微信小程序·小程序
超级新零售3 天前
服装订货会数字化:商品版本、订单状态与后续配发数据如何衔接?
大数据·小程序·企业微信
xiezhr3 天前
我用workBuddy开发了自己的第一个小程序并成功上线了
ai·小程序·ai agent·workbuddy
sinat_267611913 天前
用 AI 开发微信小程序(八):一个极简收纳工具的开发复盘
微信小程序·小程序
李纲明4 天前
微信小程序真机预览白屏或 request 失败:先核 request 合法域名与 TLS,再查体验版与本地缓存
缓存·微信小程序·小程序·小程序开发·devdiy·真机预览·合法域名
klfdgl4 天前
线上商城小程序投入测算,有成熟开发经验服务商的长期收益对比
小程序
一木 之林4 天前
Dify学习笔记 03 · RAG检索增强生成:三代范式、评估与落地(第40-45、55-56集)
笔记·小程序·交互·dify
赵小哥要冲啦4 天前
社区邻里互助小程序从 0 到 1 复盘:需求拆解与信任机制设计
java·小程序·需求分析