uniapp底部IOS安全距离

最新推荐文章于 2025-05-15 10:03:27 发布

原创最新推荐文章于 2025-05-15 10:03:27 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ios #html5

uni-app 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用CSS属性实现的安全区域布局方法，通过设置padding-bottom和bottom属性为安全区域的内边距来确保内容不会被手机底部Dock栏遮挡。文中提供了具体的CSS样式代码示例。

// 盒子用法

paddingBottom {   


　　padding-bottom: constant(safe-area-inset-top);  // 顶部安全区

　　padding-bottom: env(safe-area-inset-top);    // 顶部安全区
　　padding-bottom: constant(safe-area-inset-bottom);  // 底部安全区

　　padding-bottom: env(safe-area-inset-bottom);    // 底部安全区

　　box-sizing: content-box;

}

定位二选一

　　bottom: constant(safe-area-inset-bottom);      

　　bottom: env(safe-area-inset-bottom);

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一个假的前端男

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uni-app开发时对ios底部安全区域的控制

weixin_46419373的博客

09-09

2161

获取ios安全区域

uniapp：使用fixed定位，iOS平台的安全区域问题解决

sunluyi的博客

12-15

975

manifest.json > 添加节点。

参与评论您还未登录，请先登录后发表或查看评论

uni-app底部安全距离

wankexinjiminfei的博客

04-24

3494

* 关于使用constant(safe-area-inset-bottom)、env(safe-area-inset-bottom) 会返回底部安全区的高度两个方法都写，会自动选择能够生效的来使用可以使用calc方法来计算，根据实际情况灵活使用 */

uniapp 适配部分IPhone手机底部安全距离

廖若星辰-LTY

11-23

4342

部分 IOS 机型，比如 Iphone X 的屏幕底部有一条“小黑线”区域，uniapp 项目中我们可以使用CSS的env(safe-area-inset-bottom) 语句来自适配 IOS 的底部安全区域高度，这个语句会返回该机型的底部安全区域高度（单位 px）。

uniapp 之获取底部安全距离，状态栏高度等

最新发布

10-15

在 uniapp 中，针对不同平台使用 js 处理底部安全距离的方法有所不同。对于 iOS 平台，可在 `pages.json` 页面的 `app-plus` 里添加安全区域配置。示例代码如下： ```json { "app-plus": { "background": "#...

uniapp ios安全区域

weixin_47517731的博客

04-22

1361

底部安全区域（实列）

IOS底部安全距离配置（uniapp）

weixin_72329752的博客

09-14

1360

iPhone手机有的底部会出现安全距离，会在底部出现空白。

constant(safe-area-inset-bottom)和env(safe-area-inset-bottom)在uniapp中的使用方法解析

知码客

03-29

2029

通过在 CSS 中使用和，可以确保微信小程序的内容不会被 iPhone X 及更高版本设备的底部 Home Indicator 遮挡。这样可以提升用户体验，确保内容在不同设备上的显示效果一致。如有开发的需求联系我。

【无标题】## uniapp获取底部安全距离以及状态栏高度等等

qq_45967222的博客

04-26

1284

template>-- 自定义顶部导航 -->-- 页面内容 -->top: 0;bottom: 0;left: 0;right: 0;获取状态栏高度：var(–status-bar-height)

关于uniapp获取ios客户端平台安全距离(底部导航条)的方法

weixin_55807367的博客

11-07

1万+

在uniapp中可通过内置api获取系统信息得到： 1.uni.getSystemInfo(OBJECT)

uniapp 微信小程序，底部安全距离适配，针对安卓iPhone不同型号手机

Esther_liew的博客

08-21

1772

微信小程序底部安全距离适配

关于 uniapp 设置 safe-area-inset-bottom 本地正常，体验版不生效问题

qq_60876952的博客

05-15

425

来进行适配，但使用时必须 constant 放在 env 方法的前面，否则可能会出现开发者工具正常，上传至体验版不生效的问题。uniapp 设配ios底部安全距离时常用。

uniapp关于iphone底部安全区域

空&白的博客

11-17

1万+

项目要在底部(tabbar之上)做一个固定的按钮，在一般手机下，样式没问题。在iPhone xr和iphone11下，就出现位置不正确，问题是iphone多了一个安全区域问题大概是这一块。也是算在整个page高度里的，如果不加这个高度，那么固定定位的位置就会比原先的低（所以说，项目还是要真机测试才准确，模拟器测不准）。解决：https://ask.dcloud.net.cn/article/36494 解释个说明：var(–safe-area-inset-bottom) 安全区域的高度，直接带单位（px