解决uniapp在IOS系统H5页面底部留出安全区域问题。

幕飒前端程序员

已于 2022-11-15 14:53:30 修改

阅读量1.2k

点赞数

分类专栏： uniapp vue 文章标签： uni-app javascript 前端

于 2022-11-15 14:52:08 首次发布

本文链接：https://blog.csdn.net/weixin_42711805/article/details/127865968

版权

vue 同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

uniapp

29 篇文章 1 订阅

订阅专栏

在uniapp的template.h5.html加上meta标签viewport-fit=cover即可实现

	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">

关注博主即可阅读全文

优惠劵

幕飒前端程序员

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
解决uniapp在IOS系统H5页面底部留出安全区域问题。

在uniapp的template.h5.html加上meta标签viewport-fit=cover即可实现。
复制链接

扫一扫

专栏目录

小程序以及H5页面上IphoneX底部安全区域小黑条适配问题

03-29

背景公司项目开发中，发现iPhoneX上吸底元素存在被小黑条遮挡的问题原因在苹果 iPhoneX 、iPhone XR等机型上，物理Home键被取消，改为底部小黑条替代home键功能,从而导致吸底元素会被小黑条遮挡覆盖的问题解决方案使用已知底部小黑条高度为34px/68rpx机型适配(不建议) 使用微信官方API，getSystemInfo()中的safeArea对象进行适配（建议）使用苹果官方推出的css函数env()、constant()来适配（建议）安全区域看看图就明白了，中间绿色区域即为安全区域。也就是说，适配安全区域也就是让小程序或者H5的内容显示在绿色区域部分。

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

码农键盘上的梦

02-23

2637

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

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

uniapp 打包成APP或小程序后或H5后 IOS(iphoneX机型) 底部安全区域适配（避开底部黑条虚拟键）

weixin_48755718的博客

01-17

1621

uniapp 开发APP或小程序 iphoneX 底部安全区域适配

【uniapp h5内嵌原生app ios，底部安全距离和页面放大缩小】

qq_45078777的博客

11-09

570

uniapp h5内嵌原生app ios样式问题：1.双击和双指滑动，内嵌的h5页面均会被放大缩小2.修改ios底部的安全距离的背景色，默认是白色。

【uni-app】去掉安全区IOS 底部空白区域

可耐特

05-17

4710

在manifest.json中点开源码视图配置。编译自定义基座查看效果。

关于uni-app的iPhonex底部安全区域解决方案

孤狼B组喵儿的博客

11-24

2591

关于这个iPhone X底部安全区域问题，这个一直困扰了我好久，前前后后因为这个提交了好多次代码也在网上找了好多解决方案，今天我在这儿简单总结一下，一来也方便自己以后查笔记，二来也希望方便后来人，我的终究目标是愿世界上永远没有难解决的bug，哈哈哈当然是开玩笑的，言归正传，下面就给大家来介绍几种解决iPhone X底部安全区域的问题。

uni-app开发ios App，如何去掉底部安全空白区域

任磊

07-15

8747

123123baidi

Uniapp在IOS系统打包测试流程

07-19

1.通过蒲公英网站快速获取ios设备udid 2.登录苹果开发者社区绑定测试iPhone/ipad 的udid 3.创建Identifiers标识符 4. 登录Appuploader申请iOS证书文件p12 5.创建与下载profile文件 6.打包ipa 7. Ipa 上传到...

解决ios h5 input输入框被输入法弹出一块区域的问题

08-27

今天小编就为大家分享一篇解决ios h5 input输入框被输入法弹出一块区域的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

解决vue js IOS H5focus无法自动弹出键盘的问题

10-18

今天小编就为大家分享一篇解决vue js IOS H5focus无法自动弹出键盘的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

解决IOS端微信H5页面软键盘弹起后页面下方留白的问题

10-16

微信H5项目，ios端出现了软键盘输完隐藏后页面不会回弹，下方会有一大块留白。这篇文章主要介绍了决微信H5页面软键盘弹起后页面下方留白的问题（iOS端） ,需要的朋友可以参考下

H5+微信小程序 —— 解决iPhoneX全面屏底部小黑条遮挡的问题

不怕麻烦的鹿丸的博客

05-21

4482

在iPhoneX全面屏手机上，屏幕底部有一条小黑条遮挡页面的显示。为了解决这个问题，我们可以使用iOS11 的新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，它有四个预定义的变量： safe-area-inset-left：安全区域距离左边边界距离 safe-area-inset-right：安全区域距离右边边界距离 safe-area-inset-top：安全区域距离顶部边界距离 safe-area-inset-bottom：安全区域距离底部边界距离注意：当 v

uniapp关于iphone底部安全区域

热门推荐

空&白的博客

11-17

1万+

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

uniapp自定义突出tabbar以及安全距离问题

Pure_White520的博客

03-19

2025

由于项目的定制化，tabbar想要中间一个底部菜单栏突出的效果，于是只能定制化tabbar。以及解决引出的底部安全距离的问题。

UNI-APP_苹果底部栏自适应配置

小歪博客

04-28

1707

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

H5适配iphoneX底部留白问题

cxz

04-25

1524

问题 iphoneX底部会留白解决 1、首先，给viewport meta 标签添加一个扩展viewport-fit，用于设置网页在手机的可视窗口的布局方式　　属性值有：contain 视窗包含网页　　　　　　　cover 网页覆盖视窗　　　　　　　auto 默认值，同contain效果注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤 2、env() 和 constant()

iPhoneX安全区域与H5引发的问题(Safe Area)

余光的博客

04-09

7516

iPhoneX安全区域引发的问题(Safe Area) 瞧一瞧 LeetCode题解：Gitbook版本传送门前端笔记：Gitbook传送门目录什么是安全区域？预留出Home Indicator指示条简单总结一、什么是安全区域？最近正在开发小程序相关的需求时，遇到了一个问题——ios高版本的安全区域，即iPhoneX及以上拥有的“刘海儿”等可滑动区域会与你开发的内容重合。...

uniapp实现列表拖拽排序+滑动删除功能

TZ1284063988的博客

05-14

370

此篇代码在原插件基础进行了bug修改与滑动功能的新增原插件地址 HM-dragSorts.vue组件使用 HM-dragSorts.vue <template> <view class=""> <view class="HM-drag-sort" :style="{'height': ListHeight+'rpx','background-color': listBackgroundColor}">

uniapp全局变量

最新发布

youhebuke225的博客

05-14

459

在 UniApp 中，全局变量通常用于存储需要在整个应用程序中共享的数据或配置。虽然 UniApp 没有直接提供全局变量的概念，但你可以通过几种不同的方式来实现全局变量的功能。

ios 底部导航多出空白怎么解

07-28

要解决iOS底部导航多出空白的问题，可以按照以下步骤进行操作。首先，在manifest.json文件中找到"app-plus"字段，然后在其中添加以下配置： ```json "app-plus": { "safearea": { "bottom": { "offset": "none" } } } ``` 这样可以设置底部安全区域的偏移为"none"，表示不空出安全区域。\[1\] 另外，你也可以尝试隐藏导航栏。可以使用WeixinJSBridge来调用相关函数进行隐藏操作，例如： ```javascript WeixinJSBridge.call('hideToolbar'); //隐藏右下面工具栏 WeixinJSBridge.call('hideOptionMenu'); //隐藏右上角三个点按钮 ``` 如果需要显示导航栏，可以使用以下函数： ```javascript WeixinJSBridge.call('showToolbar'); //显示右下面工具栏 WeixinJSBridge.call('showOptionMenu'); //显示右上角三个点按钮 ``` 此外，如果只有两个页面且没有其他需求，你可以使用`this.$router.replace('/path')`来进行页面跳转，这样点击回退按钮会返回到上上一页。\[2\] 最后，你还可以为底部添加安全区域的样式，以适应不同的设备。可以在对应的样式中添加以下代码： ```css .safe-padding { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box; } ``` 这样可以为底部添加安全区域的padding，确保内容不会被底部导航栏遮挡。\[3\] 通过以上操作，你可以解决iOS底部导航多出空白的问题。 #### 引用[.reference_title] - *1* *3* [uniapp解决iOS底部安全距离](https://blog.csdn.net/Hia_amlx/article/details/131108893)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue+h5微信公众号ios系统底部导航栏处理](https://blog.csdn.net/weixin_43897062/article/details/127506757)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交