Html page adapts to iphonex

iphonex has a home button at the bottom, and a button is written at the bottom, which coincides with the home key. I want to achieve it through contant, but it doesn"t work. Please take a look at
my code

.

< DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" >
< title > < / title >
< style >

   * {
       margin: 0;
       padding: 0;
   }
   html,body {
       width: 100%;
       height: 100%;
   }
   body {
       font-size: 20px;
       height: 2000px;
       
   }
   -sharpfooter{
       width: 100%;
       height: 30px;
       background: -sharp1A98FC;
       position: fixed;
       left: 0;
       bottom: 0;
       text-align: center;
       padding-bottom: constant(safe-area-inset-bottom);
       padding-bottom: env(safe-area-inset-bottom);
   }
   

< / style >

< / head >
< body >
< div id= "footer" >

   footer

< / div >
< / body >
< / html >
effect is as follows: it does not take effect

Apr.07,2022

it's because of the box model, isn't it? if your box model is box-sizing:border-box;, if you set padding-bottom, that's probably the effect of your screenshot now:
you can try:

-sharpfooter{
       width: 100%;
       height: 30px;
       background: -sharp1A98FC;
       position: fixed;
       left: 0;
       bottom: 0;
       text-align: center;
       box-sizing:content-box;
       padding-bottom: constant(safe-area-inset-bottom);
       padding-bottom: env(safe-area-inset-bottom);
   }

what is this simulator

Menu