vue项目移动端苹果底部黑线遮挡自适配的问题

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

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

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

针对苹果手机底部黑线遮挡Vue移动端tab栏的问题，可以通过添加SCSS文件，设置body的padding-bottom来兼容iOS不同版本，同时在App.vue引入该文件，并修改index.html中的viewportmeta标签，添加viewport-fit属性以适应屏幕。

部署运行你感兴趣的模型镜像

我自己做的vue移动端项目，测试发现苹果手机底部tab栏会被苹果手机底下黑线遮挡，我在网上搜搜了很多，发现以下方法是最简单的解决方案！！！

1、vue项目中要有scss插件，没有的请百度下载，首先在src根目录中创建后缀名为scss的文件，文件名取啥都行，然后在这个文件中复制以下这个代码。

body {
    padding-bottom: constant(safe-area-inset-bottom);/* 兼容 iOS < 11.2 */
    padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
  }

2、然后在App.vue根组件中引用这个common.scss文件，一定要引用这个文件，不然没效果！！！

3、然后在主目录上找到这个index.html文件，在里面替换meta这段代码，替换之前是这个代码，<meta name="viewport" content="width=device-width,initial-scale=1.0">，下面图片是替换完之后的代码。保存之后就可以在苹果手机中查看效果了！！！

<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">

您可能感兴趣的与本文相关的镜像

PyTorch 2.6

PyTorch

Cuda

PyTorch 是一个开源的 Python 机器学习库，基于 Torch 库，底层由 C++ 实现，应用于人工智能领域，如计算机视觉和自然语言处理

vue项目移动端苹果底部黑线遮挡自适配的问题

我自己做的vue移动端项目，测试发现苹果手机底部tab栏会被苹果手机底下黑线遮挡，我在网上搜搜了很多，发现以下方法是最简单的解决方案！！！

2 条评论