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