- 屏幕上安全距离:
safe-area-inset-top
- 屏幕右安全距离:
safe-area-inset-right
- 屏幕下安全距离:
safe-area-inset-bottom
- 屏幕左安全距离:
safe-area-inset-left
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-left);
iOS 11.2+
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);
兼容性写法:
// 顶部安全距离
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
// 底部安全距离
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
注: 需在
meta
标签的content
中设置viewport-fit=cover
, 安全区域才可生效