项目中IphoneX适配

ilovexiaoming1

已于 2022-02-10 17:32:26 修改

阅读量378

点赞数

文章标签： webview javascript vue.js

于 2022-02-10 16:14:43 首次发布

本文链接：https://blog.csdn.net/ilovexiaoming1/article/details/122863035

版权

本文介绍了在移动端项目中遇到的iOS设备底部空白间距问题，特别是针对iPhone X系列。通过设置`viewport-fit=cover`和使用安全区域 inset 进行填充，以及避免使用`position:fixed`，改用flex布局来实现底部工具栏的适配。同时提供了详细的CSS代码示例，确保内容区域在全屏显示时不会被底部安全区域遮挡。

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

问题：设置position:fixed;bottom:0 IOS并没有生效，底部还会出现空白距离，如下图

1、设置：viewport-fit=cover

2、设置安全距离：

safe-area-inset-top：从视口顶部开始的安全区域插入量（以CSS像素为单位）。
safe-area-inset-bottom：从视口底部开始的安全区域插入量（以CSS像素为单位）。
safe-area-inset-left：从视口左侧开始的安全区域插入量（以CSS像素为单位）。
safe-area-inset-right：从视口右侧开始的安全区域插入量（以CSS像素为单位）。

padding-bottom: constant(safe-area-inset-bottom);

padding-bottom: env(safe-area-inset-bottom);

移动端项目中尽量不使用position:fixed;采用flex布局：

如下：

<template>
   <div class="page-container">
    <div class="main-container">
      内容区域
    </div>
    <ul class="toolbar-container">
      <li>
        <p>应用中心</p>
      </li>
      <li>
        <p>模板中心</p>
      </li>
      <li>
        <p>零码学院</p>
      </li>
    </ul>
   </div>
</template>

<script>
export default {
  
};
</script>

<style lang="scss" scoped>
@function fontSize($px) {
  @return $px / 360 * 100 * 1vw;
}

$baseFontSize: 108px;
@function px2rem($px) {
  @return $px / $baseFontSize * 1rem;
}
body{
  display: flex;
  align-items:stretch;
  overflow: hidden;
  height: 100vh;
}
.page-container{
  width: 100%;
  height: 100%;
  display: flex;
  align-items:stretch;
  flex-direction:column;
  .toolbar-container{
    position: relative;
    width: 100%;
  }
  .main-container{
    flex: 1;
    overflow:auto;
  }
}
.toolbar-container {
  width: 100%;
  background-color: #fff;
  box-shadow: 0px px2rem(-4px) px2rem(9px) 0px rgba(14, 31, 52, 0.05);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  li {
    flex: 1;
    box-sizing: border-box;
    text-align: center;
    padding:px2rem(33px) 0 px2rem(24px) 0;
    padding-bottom: calc(px2rem(24px) + constant(safe-area-inset-bottom));
    padding-bottom: calc(px2rem(24px) + env(safe-area-inset-bottom));
    &:first-child{
      padding-left: constant(safe-area-inset-left);
      padding-left: env(safe-area-inset-left);
    }
    &:last-child{
      padding-right: constant(safe-area-inset-right);
      padding-right: env(safe-area-inset-right);
    }
    a{
      text-decoration:none;
      &:active{
        text-decoration:none;
      }
    }
    img {
      width: px2rem(53px);
      height: px2rem(53px);
    }
    p {
      height: px2rem(50px);
      font-size: fontSize(12);
      margin-top: px2rem(10px);
      color: #666;
      font-family: Microsoft Yahei, PingFang, 微软雅黑, 苹方, sans-serif;
    }
    &.active {
      p {
        color: #0d94ff;
      }
    }
  }
}
</style>

参考：IphoneX适配正确姿势