解决iphonex开发时顶部和底部没有遮盖

最新推荐文章于 2023-05-05 11:34:35 发布

logytar

最新推荐文章于 2023-05-05 11:34:35 发布

阅读量1.6k

点赞数

分类专栏：前端文章标签： iphonex顶部底部 iphonex底部小黑条

本文链接：https://blog.csdn.net/qiumen/article/details/109850045

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

参考了https://blog.csdn.net/qq_40586973/article/details/79919892

前端开发VUEtify移动端框架。其实大同小异，理解了操作都是一样

====================================================================================================================

场景问题

由于我在vue项目开发时，在index.html中并没有设置满屏，因此iphonex默认只出现在安全区域内，底部跟顶部都没有占满。下面的代码段是我原先的配置

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

在开发时发现数据只出现在了安全区域范围内，顶部和底部没有覆盖到，顶部底部其背景色是透明的，整体很不好看，后来查了资料才发现iphonex若没有特殊的话，只会出现安全区域内。

场景分析

首先先了解下iphonex的区域是怎么划分的

*iphoneX屏幕组成：上部齐刘海（44px）+ 安全区域（safe area）+ 底部手势区域（34px）

竖屏：

横屏：

如果想要让开发在非安全区域也可以显示的话，需要设置一个属性 viewport-fit=cover

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

了解下该属性

viewport-fit

contain 可视窗口完全包含网页内容
cover 网页内容完全覆盖可视窗口
auto 类似contain

设置完了后就会在iphonex实现满屏了，对Android无影响。

接着用户可能就会发现另外另外一个问题了，就是顶部顶太高了，或者底部的横条盖住了，非常不美观，或者想要适当调整，但又怕影响到Android的样式，这是解决方案来了，我们可采用苹果官方推荐的方案

苹果官方推荐使用env()，constant()来适配，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：

safe-area-inset-left：安全区域距离左边边界的距离
safe-area-inset-right：安全区域距离右边边界的距离
safe-area-inset-top：安全区域距离顶部边界的距离
safe-area-inset-bottom ：安全距离底部边界的距离

env()和constant()函数有个必要的使用前提，当网页设置viewport-fit=cover的时候才生效，有一点要注意，在IOS11.2系统以前，可以使用constant()函数，但是在IOS11.2系统以后，这个函数就被废弃了，被env()函数替代了。

所以我们在做屏幕适配时，需要这样写：

padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/

padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/

注意：env()和constant()需要同时存在，而且顺序不能换。

解决方案

1 在index.html加入viewport-fit=cover 属性，实现全覆盖

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

2 处理完全覆盖后，iphonex底部会出现一些logo或者标签按钮被底部小黑条挡住，用户点击的体验效果很差，这时加入专属iphonex属性

env()，constant()

safe-area-inset-left
safe-area-inset-right
safe-area-inset-top
safe-area-inset-bottom

因为我移动端app底部是有logo 进行固定fix，是让用户切换回首页的。而且我顶部我需要设置一定的距离，因此，我需要对整个body设置到安全区域，底部的logo远程黑条，并且不要留空白

下面的v-app之类的是vuetify语法，这些不用管，这个页面结构表示仅仅告诉你我当前页面构造而已，不是让你仿造写。<router-view>这里的内容是代表正文，下面的<div 我添加了一个类footer是等下要设置远离底部黑条的。

<template>
  <v-app
    id="app"
    style="width: 100vw;
    font-size: 14px;
    text-align: center;
    color: #2c3e50;"
  >
    <router-view
      style="height:auto;margin:0px 0px 56px 0px"
      class="contentview"
    />
    <div
      fixed
      class="footer"
      style=" height: 76px;
         bottom: -20px;
         position: fixed;
        background:white ;"
      v-if="$route.path !== '/workReportApp' && $route.path !== '/setAuthority'"
    >
      <v-flex color="teal" flat value="recent" @click="Go()" class="logo">
        <img src="./assets/logo.jpg" style="width:50px;margin-bottom:3px" />
      </v-flex>
    </div>
  </v-app>
</template>

解决方案解决方案！！！样式添加方案！！

@supports (bottom: env(safe-area-inset-bottom)){
    body{
        padding-top: constant(safe-area-inset-top);
        padding-top: env(safe-area-inset-top);
        }
    
    .footer{
        padding-bottom: calc(constant(safe-area-inset-bottom) * 2); 
        padding-bottom: calc(env(safe-area-inset-bottom) * 2); 
     }

}

术语解释：

@supports 隔离兼容样式

可以使用 @supports 来隔离兼容样式，表示当浏览器支持bottom: env(safe-area-inset-bottom)的时候，那么下面的的内容才会执行有效果

给body配置了padding-top是为了能够远离顶部，避免直接贴近顶部，很丑，其实这些constant(safe-area-inset-top)等等你可以用数值px表示的。然后底部的logo我希望远离远一些，希望有两倍远，我就用calc计算就行了。