IOS 11

padding-top: constant(safe-area-inset-top);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
padding-left: constant(safe-area-inset-bottom);
Copy the code

IOS 11.2 Beta and beyond

padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
Copy the code

Compatible with writing

padding-top: 10px;
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
Copy the code

And calc share

padding-top: 10px;
padding-top: calc(10px + constant(safe-area-inset-top));
padding-top: calc(10px + env(safe-area-inset-top));
Copy the code

Use sass @ minix

// calc cannot be used to use values with units0To calculate@minix x-padding-top($val:0px) {
    padding-top: $val;
    padding-top: calc($val + constant(safe-area-inset-top));
    padding-top: calc($val + env(safe-area-inset-top));
}
Copy the code

Reference 1: wechat Development Community Reference 2: Apple official documentation