解决使用uniapp开发app端，ios部分手机底部横线适配的问题

最新推荐文章于 2024-06-14 16:57:03 发布

9527566465

最新推荐文章于 2024-06-14 16:57:03 发布

阅读量986

点赞数

文章标签： uni-app css 前端

本文链接：https://blog.csdn.net/jhfvuyhgui/article/details/130059977

版权

文章介绍了CSS中的env(safe-area-inset-bottom)函数，该函数用于获取设备底部的安全区域距离，常用于适配刘海屏等有特殊边框设计的设备。然而，这个功能仅在支持CSS3的现代浏览器中有效。示例代码展示了如何使用calc()配合env()来设置元素的底部内边距，确保内容不会被屏幕底部的系统元素遮挡。

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

底部安全距离 css函数
env(safe-area-inset-bottom)
只能在支持css3的浏览器中使用

如下：

.tabbar {
	padding: 0;
	height: calc(100upx + env(safe-area-inset-bottom) / 2);
	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

9527566465

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【商城实战(25)】解锁UniApp移动端适配秘籍，打造完美商城体验

邓邓子的博客

03-12

1370

本文围绕 UniApp 在移动端的适配展开，介绍了 UniApp 适配移动端设备的原理，包括条件编译、相对单位及弹性布局，并给出从 Spring Boot 后端获取数据展示的示例。阐述利用响应式布局实现页面自适应的方式，如 Flex 布局、媒体查询及自适应单位，附商品详情页的源码示例。还针对移动端常见适配问题，如刘海屏和虚拟按键适配，提供了在 manifest.json 文件配置及页面样式设置、监听虚拟按键状态调整布局等实现方法，助力开发者优化移动端用户体验。

uni-app - 刘海屏(Iphone X)底部横杠(——)白色区域块（安全距离处更改颜色）解决方案

王二红

12-02

1万+

场景：因为要做无tabbar页面，所以在配置文件中取消底部导航栏。取消后，iPhoneX(刘海屏)底部就出现如下图所示白色安全区域问题：这个问题，是因为uni-app默认会为iPhoneX(刘海屏)留出安全距离，这个安全距离的背景色就是白色。所以，如果你将页面颜色设置为其他颜色，就会与默认白色冲突。有2个不同的解决方案(原生占位)，虽然原理是一样，但使用的场景不同，请根据您的需求来采纳。

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

uni-app 适配苹果底部横线

www569006806的博客

05-30

1802

uni-app 适配苹果底部横线 1、使用css计算函数 page{ padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */ } 效果： 2、获取设备信息通过计算出底部高度 wx.getSystemInfo({ success: res => {

uniapp 兼容IOS手机底部黑线（iphone 10以上均有的黑线）亲测有效

yehaocheng520的博客

11-27

8521

uniapp 兼容IOS手机底部黑线 IOS苹果手机有很多款手机底部都有一条黑线。 app底部的tabbar 导航栏如果遇到IOS手机则会出现问题。因为我这边的tabbar导航栏是自己写的，不是用的uniapp自带的，所以如果遇到IOS手机底部有黑线的这种，需要将tabbar导航栏的高度调整一下才可以。除此之外还有些页面，底部有个按钮之类的，也是需要做兼容处理的。如下：解决办法如下：三行代码搞定：第一种办法：通过padding-bottom赋一个安全值可以通过padding-botto

uniapp处理IOS底部横条安全区域

qq_40666120的博客

09-06

3472

同步 uni.getSystemInfo(OBJECT) 异步 uni.getSystemInfoSync() 使用方式一 <template> <view class="content"> <view style="background-color: red;" :style="{height:heightOne+'px'}">1</view> <view style="background-color: yellow;" :style

uniapp兼容iPhoneX头部状态栏(刘海屏）和底部小横条

学习

06-17

6234

兼容iphoneX头部状态栏（刘海屏）和底部小横条，效果展示

IphoneX底部适配的实现

12-10

在iOS设备中，尤其是iPhone X系列，由于它们独特的设计，如顶部的“刘海”和底部的触控ID区域，开发者需要特别关注这些设备的屏幕适配。本篇将详细讲解如何实现针对iPhone X及其后续型号（如iPhone XS Max、iPhone ...

vue在ios手机上的一些问题（这次写的h5公众号）和后面补充的小程序问题

qq_38337245的博客

11-25

2008

坑一：使用定位fixed，底部导航不显示，代码我就不写，总结就是定位套定位，心累代码太多不想贴；坑二：禁止页面放大缩小，解决：Vue 移动端禁止页面放大缩小_fuf_xyxnxss的博客-CSDN博客_移动端禁止放大缩小坑三：移动端h5页面禁止长按选择复制，解决：移动端h5页面禁止长按选择复制_艾欢欢的博客-CSDN博客坑四：苹果手机IOS点击输入框弹出键盘后，所有按钮点击位置上移，解决：苹果手机IOS点击输入框弹出键盘后，所有按钮点击位置上移_料峭春风吹酒醒，微冷，山头斜...

微信小程序适配iphoneX，XR，12的底部安全区域（底部小黑条）

summer_my_sunshine的博客

08-03

7501

问题描述：在项目页面开发过程中，有些页面的按钮是需要固定在页面底部的（比如电商项目的确认订单页）；如果直接设置bottom:0，那么在iphonex，xr，12等机型，就会出现下面左图的问题，按钮区域距离底部太近了，用户体验就会很差，按钮也不好点击。解决思路：为了适配所有的手机机型，我们需要获取到底部小黑条的高度，给固定在底部的view设置padding-bottom，增加高度；（有些手机默认是没有底部这个区域的，没有的话padding-bottom就设置为0）解决方法： 1.首先，..

处理iphone底部状态栏与内容重合的问题

weixin_47346395的博客

06-10

719

在开发vue+vant移动端项目时，发现iphone底部状态栏会跟底部弹出框重合，vant官网提供了适配方案，这是vant适配方案地址:https://youzan.github.io/vant/#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei 上面是使用vant框架时使用的方案，我们在未使用框架或者使用了其他框架，需要自己在样式中进行底部适配时可以使用以下方案: 在index.html文件中的meta标签中引入： <meta name="viewpo

uniapp小程序，适配苹果底部黑条虚拟键，适配安全区域

qq_59572992的博客

06-14

4766

uniapp小程序，适配苹果底部黑条虚拟键，适配安全区域

uniapp使用自定义底部导航栏时，打包安卓端，底部出现一段空白

weixin_43952634的博客

01-13

1618

uniapp使用自定义底部导航栏时，打包安卓端，底部会出现一段空白，此时在pages.json文件的tabBar配置里面，加入height：1px。空白本质上是原生的底部导航栏，默认会有一段高度，使用自定义时，因要设置一级页面，所以原生导航栏也存在，无法读取0px 所以设置1px 会有条横线。

uniapp 如何配置导航栏下底部线条

SLife4599的博客

01-26

4701

uniapp导航栏下的线条显示 , 只需要在pages.json页面就行配置就可以了 , 但是一定要在手机上运行查看 , 因为电脑上的预览是看不到的图示: 只需要把圈住的代码复制到你要配置的路由模块即可! 代码配置: { "path": "pages/public/forget_password", "style": { "navigationBarTitleText": "忘记密码", "enablePullDownRefresh": false, "app-pl

uniapp h5 tabBar兼容IOS手机底部黑线

码农键盘上的梦

02-23

3305

因为我这边的tabbar导航栏是自己写的，不是用的uniapp自带的，所以如果遇到IOS手机底部有黑线的这种，需要将tabbar导航栏的高度调整一下才可以。app底部的tabbar 导航栏如果遇到IOS手机则会出现问题。一、pages.json文件中添加tarBar。[补充2：在app中$route找不到的问题]补充1：自定义switchTab跳转方法。uniapp自定义tabBar方案。二、把原生的tabBar隐藏起来。三、自定义一个tabBar组件。

【移动端应用开发】以 uniapp 打包成 APP 或小程序后或 H5 后 IOS（iphoneX 机型）底部安全区域适配（避开底部黑条虚拟键）

菜狗小测试

01-22

3254

在使用 uniapp 进行应用开发时，可能会遇到应用在 iPhone X 等带有底部安全区域的机型上显示不正常的问题。这是因为 iPhone X 及之后的机型采用了全面屏设计，屏幕底部有一个黑色的虚拟键区域，俗称"刘海"或"黑条"。在 iOS 系统中，底部安全区域的高度是由系统动态计算的，具体高度会根据不同的机型和屏幕方向而变化。因此，在进行适配时，需要动态获取底部安全区域的高度，并根据高度调整应用内容的布局。这将在 iPhone X 及之后的机型上，为页面的底部添加一个内边距，以避开底部安全区域。

解决iOS微信底部返回横条问题