Vue - 适配iPhoneX微信浏览器

最新推荐文章于 2021-08-06 16:25:27 发布

jnChen10

最新推荐文章于 2021-08-06 16:25:27 发布

阅读量856

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/sinat_33184880/article/details/103913435

版权

本文介绍了在使用vue-cli构建的项目中，如何解决iPhoneX及其类似机型底部安全区域导致Footer组件被遮挡的问题，提供了一种针对性的解决策略。

摘要由CSDN通过智能技术生成

vue-cli项目中iPhoneX底部黑色横条遮挡Footer组件的解决方法

// index.html
<head>
  // 新增 viewport-fit=cover
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scaleable=no,viewport-fit=cover">
  <style>
    body {
      position: relative;
      padding-bottom: env(safe-area-inset-bottom);
    }
  </style>
</head>

// App.vue
<template>
  <div id="app">
    <router-view/>
    <div class="iphoneXBottom"></div> // 底部遮罩层
  </div>
</template>

<script>
export default {
  name: "App"
}
</script>

<style lang="scss">
.iphoneXBottom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: env(safe-area-inset-bottom);
  background: #fff;
  z-index: 500;
}
</style>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jnChen10

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue - 适配iPhoneX微信浏览器

vue-cli项目中iPhoneX底部黑色横条遮挡Footer组件的解决方法// index.html<head> // 新增 viewport-fit=cover <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=...
复制链接

扫一扫