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

原创

于 2021-04-16 15:47:50 发布 · 1.2k 阅读

CC 4.0 BY-SA版权

文章标签：

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

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

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

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

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

效果

200万优质内容无限畅学