H5 适配全面屏

问题：最近用 vue 开发 h5 应用时，发现表单提交按钮在最下面时，iPhone 原生控件 home indicator 横条会挡住提交按钮，如下图：

所以，需要适配全面屏，在判断是全面屏时，添加定制化样式，让按钮位置往上面一点。

utils.js 中封装判断是否全面屏的工具函数：

// 检测是否为全面屏
export function checkFullScreen () {
    
  let isFullScreen = false
  const rate = window.screen.height / window.screen.width;
  let limit = window.screen.height == window.screen.availHeight ? 1.8 : 1.65; // 临界判断值
  // window.screen.availWidth：声明了显示浏览器的屏幕的可用宽度，以像素计。在 Windows 这样的操作系统中，这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。
  // window.screen.availHeight：声明了显示浏览器的屏幕的可用高度，以像素计。在 Windows 这样的操作系统中，这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。
  // window.screen.width：声明了显示浏览器的屏幕的宽度，以像素计。
  // window.screen.height：声明了显示浏览器的屏幕的高度，以像素计。
  if (rate > limit) {
    
    isFullScreen = true;
  }
  return isFullScreen
}

然后，在页面引入工具函数之后使用：

<template>
<div class="btn-container" :class="{'full-screen':isFullScreen}">
     <van-button :loading="submitLoading" block type="submit" color="linear-gradient(90deg, #2c2c2c 0%, #28beca 100%)" :disabled="!formData.name" native-type="submit">提交</van-button>
</div>
</template>
<script>
import {
     checkFullScreen } from '@/utils/utils'
export default {
    
    data() {
    
        return {
    
            submitLoading: false,
            isFullScreen: checkFullScreen()
        }
    }
}
</script>
<style lang="less" scoped>
.full-screen {
    
     padding-bottom: 0.42rem;
}
</style>

页面效果如下：