给body加的css
padding-top: constant(safe-area-inset-top);
padding-left: constant(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width, viewport-fit=cover">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, initial-scale=1, maximum-scale=1, viewport-fit=cover"/>
@media only screen and (device- 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { /* 这代表IPX */ /* 目前这种设备像素比 和 尺寸是很“奇葩”、特殊的，基本可以确定是 IPX */ } @media only screen and ( 812px) and (height: 375px) and (-webkit-device-pixel-ratio: 3) { /* 这代表IPX的横屏模式 */ /* 针对 IPX 横屏单独处理 */ }