vant的底部菜单被ipone12底部小黑条挡住的解决方案

最新推荐文章于 2024-06-03 08:00:15 发布

原创

最新推荐文章于 2024-06-03 08:00:15 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

博客讲述了在开发中遇到iPhone12底部小黑条导致vant底部菜单被遮挡的问题，通过在viewport元标签中添加viewport-fit=cover属性成功解决，并提醒若页面设置为100vh时，可能需要手动调整padding-bottom。

vant的底部菜单被ipone12底部小黑条挡住的解决方案

记录下今天在工作中遇到的一个问题。底部菜单被ipone12底部小黑条给挡住了，具体情况如下图所示:
在这里插入图片描述

经过一番百度，终于找到了解决方案，在网页的元信息viewport添加viewport-fit=cover

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

效果

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

huangxiaopang2

关注关注

3
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

移动端固定输入框在底部会被键盘遮挡的解决方法(必看篇)

08-28

移动端固定输入框在底部会被键盘遮挡的解决方法移动端固定输入框在底部会被键盘遮挡的解决方法是移动端开发中常见的问题。该问题的出现是由于键盘弹出时，会将固定输入框挡住，导致用户无法 vedere 输入框的内容。...

精选资源

vant自定义二级菜单操作

01-18

本组件是为了解决二级联动的效果编写的，这里使用了省份和城市分开的效果，具体展示效果，可以参考下面。（2）组件代码： <button @click=showM>{{ value || 选择省份 }}</button> <button @...

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

解决IOS上van-popup被底部Tab遮挡问题

qq_36626404的博客

10-21

4303

van-popup组件的放置位置一定要是templet底下包裹元素的直接子子级。

Vant UI 对iPhone X 等机型进行底部安全区适配

愚人码头的博客

04-27

575

Vant UI 对iPhone X 等机型进行底部安全区适配 iPhone X 等机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行...

底部footer挡住上面内容的bug

weixin_30446197的博客

08-06

1235

当设置底部footer的样式为： .footer{ 　　position: fixed; 　　height: 49px; 　　bottom: 0; 　　background: #fff; } 这样会挡住上面的内容，修改如下：给body加个样式： body{ 　　padding-bottom: 49px; //和设置fixed的高度一致就好 } 转载于:htt...

vant ios 刘海屏情况下的问题

技术前端，忠于热爱 @回忆哆啦没有A梦

12-16

767

vant ios 有刘海屏情况下的问题使用ActionSheet 动作面板出现的问题

解决兼容苹果手机底部黑线的问题

DLY_66L14的博客

08-06

1036

解决兼容苹果手机底部黑线的问题。

精选资源

vant组件小程序版适用小程序

09-01

标题中的“vant组件小程序版”指的是Vant WeApp，它是Vant UI框架的小程序适配版本，允许开发者在微信小程序以及其他支持Vue.js语法的小程序平台上使用Vant的组件。这使得开发者可以利用Vant的丰富组件库，如按钮、...

精选资源

小程序使用Vant weapp的索引栏IndexBar无法正常跳转至对应锚点且底部异常

01-03

小程序使用Vant weapp的索引栏IndexBar组件无法正常跳转至对应锚点，且无变色效果，但滚动正常。 Vant UI库是采用dist文件引入的方式导入。按官方demo在xx.json引入组件 van-index-bar: ../../dist/index-bar/...

iphoneX 适配（底部导航栏被黑线遮挡）

tendernessxy的博客

03-04

853

iphoneX 适配（底部导航栏被黑线遮挡）

van-popup 在ios手机上被键盘遮盖问题

wk6swt88的博客

08-03

2067

1. 先试试组件提供的属性能否解决，例如：get-container指定挂载的节点。2. 再者就是自己给元素焦点，阻止元素获取焦点的默认行为。一般都是挂载到body，或者#app元素上。这是我试过能解决的方法。

ios webView h5页面覆盖底部安全区域小黑条

思琦

12-14

3164

vue h5页面适配 ios底部安全区域小黑条问题

解决苹果手机底部黑线影响布局的问题

cb294的博客

10-10

1105

今天做项目的时候，发现安卓手机和苹果手机有一个差异苹果手机底部黑线会挡住我页面底部的内容解决方法就是给盒子底部加内边距，即padding-bottom:env(safe-area-inset-bottom) env(safe-area-inset-bottom)可以根据苹果手机底部黑线的高度来确定内边距大小 ...

vant 时间组件在苹果手机弹出问题

weixin_45266081的博客

12-20

810

如果设置的值为 new Date(‘xxxx,xx,xx’)，带字符串的，安卓手机没有问题，但是苹果手机会存在问题，这种问题多用于处理获取当前日期返回导致，如下设置的最小时间是利用自定义函数返回，返回的类型为String类型，苹果出现弹窗问题，安卓没问题。vant 最大时间与最小时间可用new Date(xxxx,xx,xx)来进行设置。

VUE项目底部tab切换如何解决在iPhoneX和iPhoneX Max 的底部小黑条挡住的问题

最新发布

Zhang_web的博客

06-03

378

【代码】VUE项目底部tab切换如何解决在iPhoneX和iPhoneX Max 的底部小黑条挡住的问题。

解决小程序页面底部块设置fixed，ios下拉出现回弹遮盖底部块的问题

xwc999

03-18

1428

这个问题我的解决方式是，安卓因为没有问题，所以不改变，而ios出现问题，在被遮盖地方的最外层父级标签加上padding-bottom:xxx; 判断系统型号，这里我是写在app.js里面，也可以单独调用 app.js： wx.getSystemInfo({ success: function (a) { var w = a.s...

小程序UI组件 Vant Weapp Popup弹出层和Picker选择器组合使用按钮被遮盖恢复不了的问题

qq_31120499的博客

06-01

4977

Vant Weapp Popup弹出层和Picker选择器组合使用，如果picker在popup上存在滚动条，在开发者工具上鼠标可以滚动还原picker的确认和取消按钮位置，但是在真机上，把picker的确认和取消按钮滚上去之后，就不能滚动还原按钮初始的位置，只能滑动picker的正文内容部分。 1.图一右边出现滚动条 2.把图2按钮滚上去之后，会变成图1，在真机上无法还原按钮到图2的状态解决方法：加大popup的高度，让popup的高度比picker的高度大。 ...

vue项目中使用vant组件ImagePreview图片预览在iOS上存在的问题

tsw529的博客

06-11

2912

存在问题在多个组件内使用，iOS下，切换路由后，会导致ImagePreview组件无法进行图片预览,放大图片 <img v-for="(item, index) in imgList" @click="imgPreview(imgList, index)" :key="index" :src="item" alt /> // 组件内 import { ImagePreview } from "vant"; methods: { imgPreview(img

vant 遇到van-sidebar 数据超出不能滑动

总结前端开发中遇到的问题，分享前端知识

09-14

1981

问题：项目中使用了van-popup弹出层加载子组件内容，子组件使用了van-sidebar侧边导航解决方法： lock-scroll 是否锁定背景滚动 <van-popup v-model="showLaodingport" position="bottom" :style="{ height: '100%'}" :lock-scroll="false"> //子组件 <loadingPort @child="fromLoadingport"