小程序在iponeX下安全区域的显示

最新推荐文章于 2025-06-10 11:40:01 发布
原创 最新推荐文章于 2025-06-10 11:40:01 发布
· 262 阅读 · 0 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序

在iOS开发中，针对iPhoneX及后续机型的刘海屏设计，未设置安全区域的页面可能会被顶部或底部遮挡。解决这个问题的方法是在CSS中添加安全区域的内边距，如`padding-bottom: constant(safe-area-inset-bottom);`和`padding-bottom: env(safe-area-inset-bottom);`，确保内容不会被设备的凹槽或home条覆盖。

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

在实际开发中，我们写的页面如果没有设置安全区域，则会在iponeX下有被遮挡。

解决方法只需设置安全区域的样式即可：

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

uni-app - 刘海屏(Iphone X)底部横杠(——)白色区域块（安全距离处更改颜色）解决方案
王二红
12-02 1万+
场景：因为要做无tabbar页面，所以在配置文件中取消底部导航栏。取消后，iPhoneX(刘海屏)底部就出现如下图所示白色安全区域问题：这个问题，是因为uni-app默认会为iPhoneX(刘海屏)留出安全距离，这个安全距离的背景色就是白色。所以，如果你将页面颜色设置为其他颜色，就会与默认白色冲突。有2个不同的解决方案(原生占位)，虽然原理是一样，但使用的场景不同，请根据您的需求来采纳。
iPhone 全机型分辨率和尺寸大全
fanshengle的博客
07-05 2205
iPhone 所有机型尺寸与分辨率全面解析。
商城小程序踩坑（一）：iPhone 11、iPhoneX 等设备底部安全区域/小黑条适配
zhenghhgz的博客
07-31 1211
小编测试了部分安卓机、iPhone11、iPhoneX、iPhone12 等多个机型可以完美适配有需要代码的可以从下方获取：开源不易，大家给项目点个Star，也是对项目的认可与支持！
小程序IOS安全区问题处理整理
天马3798
08-13 786
wx.getSystemInfo(Object object)返回safeArea，在竖屏正方向下的安全区域。** 注意：**env () 和 constant () 需要同时存在，而且顺序不能换。一、IOS苹果手机安全区展示交互，Fixed底部工具栏css处理。底部Fixed工具栏，要做屏幕适配时，需要这样写。...
页面兼容iPhone X的显示方法。
sak1sm的笔记
11-14 940
在适配iPhone X 的时候，首先要在head处添加meta，使页面充满屏幕 然而iPhone X 增加了底部手势的提醒，如果页面内容过于贴近底部，会造成按钮误触的情况，为了避免这种情况，可以使用IOS的env变量来设置底部导航栏或者其他的元素。 举个例子： <div class="header"></div&amp
小程序开发中的底部安全区域处理技巧
weixin_53156345的博客
11-17 2021
底部安全区域是指在一些全面屏手机上，由于硬件结构的限制，屏幕显示区域并非完全覆盖整个屏幕，因此底部会存在一个类似"刘海"的凹口。这一区域被称作底部安全区域，开发者需要特别处理才能确保页面内容不被遮挡。
微信小程序适配iphoneX，XR，12等机型的底部安全区域
weixin_41847305的博客
08-09 2994
为了适配所有的手机机型，需要获取到底部小黑条的高度，给固定在底部的view设置padding-bottom，增加高度；（有些手机默认是没有底部这个区域的，没有的话padding-bottom就设置为0）
IOS上复制粘贴号码到input有空格及input位数限制问题详解
小圣贤君的博客
08-30 4613
需求说明： 用户手机聚焦input后，弹出数字键盘，可以正常输入11位手机号，也可以从电话本复制电话号然后直接执行粘贴操作。 问题说明： 1.input聚焦时弹出数字键盘，type=number时，安卓正常，ios无效。 2.当input type 为number时，input加maxlength限制长度属性无效。 3.ios上粘贴电话号到input中会有空格，且获取不到数据。 问题解决： 1.因...
CSS 适配 iPhoneX 全面屏
dlf_0610的博客
06-08 3019
CSS 网页适配 iPhoneX，就是这么简单 展开 前言 iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。 笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助，以下是处理前后效果图： 适配之前需要了解的几个新知识 安全区域
钉钉应用中H5开发适配iphonex
snailmar的博客
07-24 2434
钉钉容器中开发H5应用时适配iphonex 首先要了解iphonex屏幕尺寸的一些知识,可以参考H5页面WebView在Iphonex的适配,有了对iphonex屏幕的基本认识后,适配就相对简单一些了. 盗图一张: bottom部分fixed定位,底部会造成镂空,此时我们在viewport中加入viewport-fit=cover,html和body设置高度100%,可以将bottom部分下移到...
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
01-19
最近写小程序时，遇到了 iPhoneX 底部小黑线与内容重叠的问题，实际上是iPhoneX安全区域的适配问题，了解清楚这个问题花了挺多时间的，也实操出了结果，忍不住来总结总结。 前言 在苹果 iPhoneX 、iPhone XR等设备上，可以看到物理Home键被取消，改为底部小黑条替代home键功能。微信小程序和 h5 网页需要针对这种情况进行适配，否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情况，如下图。 1. 安全区域是什么意思？ 想要解决内容与小黑线重叠的问题，我们需要先了解清楚苹果对于安全区域的定义。 安全区域 安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角(corn
微信小程序 自定义导航栏以及安全区域计算和适配
qq_42164957的博客
12-07 2124
微信小程序 自定义导航栏以及安全区域计算和适配
微信小程序兼容iphone适配安全区域
qq_37301074的博客
04-09 1008
兼容 ios 安全区域，不遮挡底部小黑条
微信小程序安全区域适配问题
欲变世界，先变其身
06-01 4053
在微信小程序开发过程中，有些页面的按钮是需要固定在页面底部（如电商详情页中的加入购物车按钮等），如果将底部栏样式直接设置为bottom：0;，那么在iPhone X、iPhone XR、iPhone 12等机型中，就会出现下图所示问题：按钮区域距离底部太近，可点击区域缩小，用户体验感差。利用IOS新增的 env() 和 constant() 特性即可解决，开发者不需要自己动态计算高度，只需将如下CSS代码添加至样式中：示例代码：
微信小程序中安全区域计算和适配
greendx的博客
01-18 5898
微信小程序中安全区域计算和适配
小程序IOS安全区域优化：safe-area-inset-bottom
zhazhawei9527的博客
09-21 1091
小程序IOS安全区域优化：safe-area-inset-bottom
微信小程序 iPhoneX 底部安全区域适配
卜卦的博客
03-03 8844
1.问题 微信小程序的tabbar会被iPhoneX 底部小黑条覆盖 2.解决方案 （1）获取手机型号，单独处理样式（底部小黑条大约为68rpx） （2）实现铺满全屏效果 （3）具体代码 app.js中统一处理 wx.getSystemInfo({ success: res => { //导航高度 this.globalData...
1分钟解决 微信小程序 iPhone 11、iPhoneX 底部安全区域（底部小黑条）适配
热门推荐
guopeisi的博客
10-15 2万+
【最新：目前微信官方已适配iPhone11手机型号，分别为：iPhone 11，iPhone 11 Pro Max】 iPhone X 对于微信小程序的tabbar来说，会被底部小黑条覆盖，需要处理，大概思路是，得到手机型号、分别判断样式，即可，iPhone 11 的手机型号目前微信官方尚未适配，可以暂用（res.model）.search('unknown') 进行判断区分【已适配，用...
微信小程序适配iphoneX，XR，12的底部安全区域（底部小黑条）
summer_my_sunshine的博客
08-03 7506
问题描述： 在项目页面开发过程中，有些页面的按钮是需要固定在页面底部的（比如电商项目的确认订单页）；如果直接设置bottom:0，那么在iphonex，xr，12等机型，就会出现下面左图的问题，按钮区域距离底部太近了，用户体验就会很差，按钮也不好点击。 解决思路： 为了适配所有的手机机型，我们需要获取到底部小黑条的高度，给固定在底部的view设置padding-bottom，增加高度；（有些手机默认是没有底部这个区域的，没有的话padding-bottom就设置为0） 解决方法： 1.首先，..
uniapp开发小程序vendor.js 过大
最新发布
weixin_45561965的博客
06-10 216
有遇到这个问题的伙伴可以试一下~到这就可以解决这个问题了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值