H5 adaptive full screen

problem ： Recently, with vue Development h5 When applied , When the form submit button is found at the bottom ,iPhone Native controls home indicator The bar will block the submit button , Here's the picture ：

therefore , Full screen adaptation required , When it is judged to be a full screen , Add custom styles , Put the button a little higher .

utils.js The tool function to determine whether the screen is complete is encapsulated in ：

//  Check whether it is a full screen 
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; //  Critical value 
  // window.screen.availWidth： States the available width of the screen that displays the browser , In pixel . stay  Windows  In such an operating system , This available height does not include the assignment to semi permanent features （ Such as the taskbar at the bottom of the screen ） The vertical space of .
  // window.screen.availHeight： Declares the available height of the screen that displays the browser , In pixel . stay  Windows  In such an operating system , This available height does not include the assignment to semi permanent features （ Such as the taskbar at the bottom of the screen ） The vertical space of .
  // window.screen.width： Declares the width of the screen that displays the browser , In pixel .
  // window.screen.height： Declares the height of the screen that displays the browser , In pixel .
  if (rate > limit) {
    
    isFullScreen = true;
  }
  return isFullScreen
}

then , After the tool function is introduced into the page, use ：

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

The page effect is as follows ：