尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
【小程序多端开发】UniApp 微信小程序开发中的屏幕安全区域适配指南
目录一、为什么需要适配二、方案一:CSS 环境变量(首选)底部固定操作栏的标准写法自定义导航栏的顶部适配三、方案二:JS API 动态获取1.uni.getSystemInfoSync() 获取安全区2. uni.getMenuButtonBoundingClientRect() 适配胶囊四、典型场景的完整代码片段场景 1:底部固定按钮栏场景 2:微信小程序自定义导航栏场景 3:底部弹出层(如 uni-popup)五、常见踩坑与排查六、适配方案速查表屏幕安全区域指设备屏幕上不被状态栏、刘海、圆角、底部指示条(Home Indicator)或虚拟按键遮挡的可视区域。在微信小程序中,iPhone X 及之后的全面屏机型底部约有 34px 的 Home Indicator 安全区,顶部状态栏高度因机型从 20px 到 59px 不等;如果在底部固定按钮、自定义导航栏、弹出层等场景不处理这些区域,就会出现按钮被遮挡、内容压在状态栏下、点击失效等典型问题。下面从概念、方案到代码给出完整说明。一、为什么需要适配全面屏手机的结构性改动主要体现在两端:顶部:刘海屏/灵动岛机型状态栏高度增加,使用自定义导航栏(navigationStyle: "custom")时页面内容会顶到屏幕最上沿,被状态栏文字、电量图标遮挡php.cn。底部:Home Indicator 区域与页面内容重叠,固定在底部的按钮、tabBar、操作栏会被横条盖住,影响点击uvui.cn。不同 iPhone 机型的安全区参考值:机型状态栏高度底部安全区iPhone 8 / SE(非全面屏)20px0iPhone X / 11 Pro / 12 mini / 13 mini44px34pxiPhone 12 / 13 / 1447px34pxiPhone 14 Pro / 15 / 16(灵动岛)54px34px这些数值不能硬编码,必须通过 CSS 环境变量或 JS API 动态获取。二、方案一:CSS 环境变量(首选)iOS 11.2+ 支持env(),iOS 11.0–11.1 仅支持constant()。两者必须同时写,且constant()在前、env()在后,否则旧系统会解析失败导致样式失效uvui.cn+1。四个方向的安全距离:env(safe-area-inset-top); /* 顶部,刘海/状态栏 */ env(safe-area-inset-bottom); /* 底部,Home Indicator */ env(safe-area-inset-left); /* 左侧,横屏刘海 */ env(safe-area-inset-right); /* 右侧,横屏刘海 */底部固定操作栏的标准写法.footer-bar { position: fixed; left: 0; right: 0; bottom: 0; /* 顺序不能颠倒:constant 兼容 iOS 11.0-11.1,env 兼容 iOS 11.2+ */ padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; /* 关键:让 padding 叠加在内容高度之外 */ }列表页底部留白(防止最后一项被指示条盖住):.list { padding-bottom: 0; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }关键细节:safe-area-inset-bottom是一个长度值,可直接用于padding-bottom、height、bottom等属性,不要追加 px 单位,写成env(safe-area-inset-bottom)px会解析失败。自定义导航栏的顶部适配在pages.json中开启navigationStyle: "custom"后,页面内容会顶到状态栏。最简单的做法是用一个占位view让出状态栏高度:view/view viewg
RELATED

相关推荐

2026年AI病毒卷土重来:从DseWiki事件看AI安全新挑战

2026年AI病毒卷土重来:从DseWiki事件看AI安全新挑战

【AI病毒重现江湖】 2006年底,一只手捧三支香、面带微笑的熊猫图标,毁了数百万人的电脑。「熊猫烧香」蠕虫在两个月内席卷全国,可执行文件变成诡异熊猫图案,硬盘数据被破坏,局域网瘫痪,杀毒软件也被病毒反杀…

📅 2026/11/11 18:13:32
长上下文模型评测高分不等于落地可用:从MRCR 98.5看技术选型与工程实践

长上下文模型评测高分不等于落地可用:从MRCR 98.5看技术选型与工程实践

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📅 2026/10/11 21:40:34
小巨人智能养殖设备打造分场景落地服务支撑能力

小巨人智能养殖设备打造分场景落地服务支撑能力

伴随国内畜禽规模化、智能化改造持续推进,硬件装备性能之外,配套售后服务已经成为项目平稳运行的重要支撑。不同畜禽品类的生产工况差异显著,蛋鸡侧重于集蛋、分级设备运维;肉鸡生产批次周转节奏快;蛋鸭场区长期处于高…

📅 2026/10/12 18:29:39
MORE NEWS

更多资讯

📰

三林附近报考电工证千万别踩坑,实操考试心里没底怕挂科?手把手教你避坑

三林附近报考电工证千万别踩坑,实操考试心里没底怕挂科?手把手教你避坑 实操考试心里没底怕挂科,是很多人报考电工证时最怕遇到的问题。尤其是像三林附近这类区域,虽然报考点看似不少,但信息不对称、流程不清、政策变化频繁,真的很容易踩坑。今天我就以…

📰

上海高级电工证落户最新官方回应:工地太忙根本没时间复习考试怎么办?

上海高级电工证落户最新官方回应:工地太忙根本没时间复习考试怎么办? 工地太忙根本没时间复习考试,这是很多一线电工朋友的真实写照。尤其在像上海这样的大城市,建筑项目密集、工期紧、任务重,很多电工师傅白天忙于施工,晚上还要兼顾家庭,根本腾不出时…

📰

广西电工证免费怎么报?实操考试心里没底怕挂科?官方报名入口全知道

广西电工证免费怎么报?实操考试心里没底怕挂科?官方报名入口全知道 实操考试心里没底怕挂科?广西电工证免费怎么报?很多人在报考电工证时都遇到过这个问题。尤其是新手,对流程不熟悉,对考试内容不了解,导致心里没底,怕挂科。但其实,只要走对了路,找…

📰

南江特种作业操作证过期了不知道怎么复审延期?上岗必备操作指南

南江特种作业操作证过期了不知道怎么复审延期?上岗必备操作指南 证书过期了不知道怎么复审延期?你不是一个人。很多南江特种作业操作证持有者在工作一段时间后,因为疏忽或不了解流程,发现证书已经过期,面临下岗、停工、甚至罚款的风险。南江特种作业操作…

📰

水电工证哪个部门颁发在哪考别再交冤枉钱了

水电工证哪个部门颁发在哪考别再交冤枉钱了 怕考不过白交培训费?别急,先搞清楚水电工证哪个部门颁发在哪考,再选机构。我带过十几个新乡建筑工地的工人,几乎人人都踩过坑,最常见的是花了钱没拿到证,或者拿的证根本不能上岗。这篇文章讲透水电工证的办理…

📰

新乡考电工证复审真实经历:别再被中介坑,自己搞定更靠谱

新乡考电工证复审真实经历:别再被中介坑,自己搞定更靠谱 你是不是也这样,找电工证复审,到处问人,结果不是被推荐到黑中介,就是被拉去交一堆没用的费用?别急,我来告诉你, 新乡考电工证复审…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬