微信小程序不同机型底部安全区域问题

最新推荐文章于 2025-03-05 21:08:14 发布
原创 最新推荐文章于 2025-03-05 21:08:14 发布 · 2.1k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #小程序

在微信小程序开发过程中，有些页面底部按钮是固定在底部的，还有如果是自定义tabbar也是需要固定在底部的，这里有两个问题：

  • 不同机型的底部安全区域不同，如有些苹果手机底部有操作栏，这部分距离需要留出来否则会遮挡内容
  • 如果底部有固定定位元素，可能会导致内容区域底部部分元素被固定元素遮挡

问题1解决方法

使用safe-area-inset-bottom CSS 属性

这个属性可以获取到底部安全区域的高度。你可以通过在需要适配的元素上使用此属性，并将其设置为对应的值来实现适配。

.bottom-wrap {
   
   
	position: fixed;
	bottom: 0;
	padding-bottom: constant(safe-area
最低0.47元/天 解锁文章
GY-93
关注
微信小程序自动计算底部安全距离
夏夜追凉丶的博客
06-29 2039
微信小程序自动计算底部安全距离
【微信小程序】底部有安全距离，适配iphone X等机型的解决方案
Minf的博客
07-30 5006
微信小程序开发常常需要适配机型问题，如iPhoneX/XR等机型，底部有黑色横杠（称为安全距离），这时如果直接加css样式。能计算出安全距离，我想到一个通用的写法，具体做法是将页面高度。是不行的，不会计算底部安全距离，而会与之重叠。的高度限制为屏幕高度减去安全距离，代码实现是。经过搜索后，我们知道。...
小程序开发中的底部安全区域处理技巧
weixin_53156345的博客
11-17 2415
底部安全区域是指在一些全面屏手机上，由于硬件结构的限制，屏幕显示区域并非完全覆盖整个屏幕，因此底部会存在一个类似"刘海"的凹口。这一区域被称作底部安全区域，开发者需要特别处理才能确保页面内容不被遮挡。
微信小程序 iPhoneX底部安全区域（底部小黑条）适配(一分钟解决)
10-16
iPhone X 对于微信小程序的tabbar来说，会被底部小黑条覆盖，需要处理，大概思路是，得到手机型号、分别判断样式。这篇文章主要介绍了微信小程序 iPhoneX底部安全区域（底部小黑条）适配问题,需要的朋友可以参考下
微信小程序适配iphoneX，XR，12及以上，获取底部安全区域
donghua201的博客
09-25 2619
iphone x及以上的异形屏top高度为44px（或以上），非异形屏为20px。先判断是否为异形屏，如果是，获取到底部小黑条区域的高度。在页面设置底边距padding-bottom/margin-bottom，把内容区域隔开。小黑条区域高度=屏幕高度-安全区域的bottom值，安全区域指的是内容可见区域注意小黑条区域的高度单位是。
微信小程序底部安全区域高度获取
weixin_51293134的博客
09-22 2827
safe-area-inset-bottom 就是安全区的高度。
微信小程序 自定义导航栏以及安全区域计算和适配
qq_42164957的博客
12-07 2424
微信小程序 自定义导航栏以及安全区域计算和适配
微信小程序适配iphoneX，XR，12等机型的底部安全区域
weixin_41847305的博客
08-09 3055
为了适配所有的手机机型，需要获取到底部小黑条的高度，给固定在底部的view设置padding-bottom，增加高度；（有些手机默认是没有底部这个区域的，没有的话padding-bottom就设置为0）
小程序根据手机机型设置自定义底部导航距离
10-16
在开发微信小程序的过程中，有时需要根据用户的手机机型来实现特定的布局优化，特别是对于像iPhone X及后续机型，由于它们的屏幕底部有显著的弧度，可能会遮挡自定义的底部导航栏。本文将详细讲解如何根据手机机型...
精选资源
小程序以及H5页面上IphoneX底部安全区域小黑条适配问题
03-29
背景 公司项目开发中，发现iPhoneX上吸底元素存在被小黑条遮挡的问题 原因 在苹果 iPhoneX 、iPhone XR等机型上，物理Home键被取消，改为底部...也就是说，适配安全区域也就是让小程序或者H5的内容显示在绿色区域部分。
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
01-19
最近写小程序时，遇到了 iPhoneX 底部小黑线与内容重叠的问题，实际上是iPhoneX安全区域的适配问题，了解清楚这个问题花了挺多时间的，也实操出了结果，忍不住来总结总结。 前言 在苹果 iPhoneX 、iPhone XR等设备上，可以看到物理Home键被取消，改为底部小黑条替代home键功能。微信小程序和 h5 网页需要针对这种情况进行适配，否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情况，如下图。 1. 安全区域是什么意思？ 想要解决内容与小黑线重叠的问题，我们需要先了解清楚苹果对于安全区域的定义。 安全区域 安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角(corn
微信小程序安全区域适配问题
欲变世界，先变其身
06-01 4186
在微信小程序开发过程中，有些页面的按钮是需要固定在页面底部（如电商详情页中的加入购物车按钮等），如果将底部栏样式直接设置为bottom：0;，那么在iPhone X、iPhone XR、iPhone 12等机型中，就会出现下图所示问题：按钮区域距离底部太近，可点击区域缩小，用户体验感差。利用IOS新增的 env() 和 constant() 特性即可解决，开发者不需要自己动态计算高度，只需将如下CSS代码添加至样式中：示例代码：
微信小程序、H5 （IOS 底部适配）safe-area-inset-bottom
吴冬雪的博客
03-07 5430
需要将viewport设置为cover，env和constant才能生效。因为现在的ios全面屏底部有小黑线，位于底部的元素会造成黑线的阻挡，可以使用。auto：默认值，此值不影响初始布局视图端口，并且整个web页面都是可查看的。tips: 记得先使用constant 再使用 env。在lang="stylus"中 前面需要加~contain：可视窗口完全包含网页内容。cover：网页内容完全覆盖可视窗口。
微信小程序 ios 手机底部安全区适配
天问博客-专注于大前端技术
12-11 1722
在开发微信小程序中，遇到 IOS 全面屏手机，底部小黑条会遮挡页面按钮或内容，因此需要做适配处理。
【微信小程序】计算状态栏（statusBar）、导航栏（navBar）、底部安全区域高度，并设置自定义导航栏内容垂直居中
qq_40167860的博客
08-30 5665
本文介绍了在微信小程序中，当navigationStyle设置为custom时，如何计算页面状态栏、导航栏及内容区域的高度。
微信小程序开发 中 “安全区域“
最新发布
ultramand的博客
03-05 934
随着手机屏幕的多样化，尤其是iPhone X等带有刘海屏或底部操作区域的手机，开发者需要确保小程序的内容不会被这些系统组件遮挡。因此，微信小程序提供了一些API和CSS样式规则来帮助开发者适配这些特殊屏幕。在微信小程序开发中，"安全区域"是指在小程序页面中，不会被系统组件（如状态栏、标题栏、iPhone X 系列的刘海屏等）遮挡的可视区域。开发者应该根据获取到的安全区域信息来调整小程序页面的布局，确保内容不会被遮挡。例如，可以通过设置页面的。使用上述CSS，可以确保页面内容不会被状态栏和底部操作区域遮挡。
微信小程序中安全区域计算和适配
greendx的博客
01-18 6287
微信小程序中安全区域计算和适配
微信小程序 iPhoneX底部安全区域（底部小黑条）适配
thingir的博客
01-06 1753
先看图： 借用一下网上的图，来详细解释下： 自定义tabbar，代码实现 tabbar采用定位，使用 top值 来决定tabbar显示 onLoad: function () { var statusH = wx.getSystemInfoSync().statusBarHeight; // 状态栏高度 var safetop = wx.getSystemInfoSync().safeArea.top; // 安全区域距离顶部高度 var safeH = wx.getS
微信小程序添加苹果底部安全区
02-27
### 解决苹果手机底部安全区布局问题 对于苹果手机底部的安全区域，在微信小程序中可以通过特定的 CSS 类和条件编译功能来处理。为了确保页面内容不会被 iPhone 的圆角屏幕、传感器区域以及虚拟按键所遮挡，可以采用如下方法[^3]。 #### 使用 `safe-area-inset` 样式属性 现代浏览器支持环境查询（Environment Queries），这允许开发者针对不同设备特性应用不同的样式规则。具体到微信小程序环境中： ```css /* 底部留白 */ .page { padding-bottom: constant(safe-area-inset-bottom); /* 兼容iOS 11.0~11.2版本 */ padding-bottom: env(safe-area-inset-bottom); /* 推荐写法，兼容更高版本 */ } ``` 上述代码片段利用了 `env()` 函数，它会自动计算并返回对应于指定环境变量的实际像素值。这里特别指定了 `safe-area-inset-bottom` 来应对iPhone X系列及其后续机型特有的底部空间需求。 #### 动态调整容器高度 除了静态设定外边距之外，还可以借助 JavaScript 或框架本身的生命周期钩子函数实时监测视窗尺寸变化，并据此修改组件的高度或其他样式参数。例如在 Vue.js 中实现类似逻辑时可参照以下方式操作: ```javascript export default { data() { return { containerStyle: {}, containerClass: '' }; }, mounted() { const that = this; function handleResize() { if (/(iPhone|iPad|iPod)/i.test(navigator.userAgent) && !window.fullScreen) { that.containerStyle['paddingBottom'] = 'constant(safe-area-inset-bottom)'; that.containerClass += ' has-safe-area'; } else { delete that.containerStyle.paddingBottom; that.containerClass = ''; } } window.addEventListener('resize', handleResize); handleResize(); // 初始化调用一次 this.$once('hook:beforeDestroy', () => { window.removeEventListener('resize', handleResize); }); } } ``` 此段脚本会在每次窗口大小发生变化时重新评估当前是否需要增加额外的空间以避开可能存在的硬件按钮或边缘部分。 #### UniApp 开发注意事项 如果是在 UniApp 下开发，则可以直接使用其内置的支持机制来进行更简便的操作。UniApp 提供了一个名为 `<cover-view>` 组件专门用于覆盖原生控件之上显示自定义内容，并且能够很好地适应各种异形屏设计特点[^1]。 ```html <template> <view class="content"> <!-- 页面主体 --> <!-- 覆盖层，放置需固定定位的内容 --> <cover-view v-if="isIphoneX" :style="{ paddingBottom: safeAreaInsets.bottom + 'px' }"></cover-view> </view> </template> <script> import { isIphoneX, getSafeAreaInsets } from '@dcloudio/uni-app'; export default { data() { return { isIphoneX, ...getSafeAreaInsets() }; } }; </script> ``` 以上就是在微信小程序尤其是基于 UniApp 构建的应用程序里为苹果手机提供更好用户体验的一些实践技巧。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值