iPhoneX 安全区域 safe-area-inset-*样式不生效_safe-area-inset-top无效

iPhoneX 安全区域 safe-area-inset-*样式不生效

解决办法：添加 meta name="viewport" 中增加viewport-fit=cover 内容

方法1: 修改html

<meta name="viewport" id="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">
1

方法2：js动态调整

(document.getElementsByName('viewport')[0] as HTMLMetaElement).content =
  'user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover';
1
2

补充 1 兼容写法

iOS 11 constant(safe-area-inset-top)
iOS 11.2+ env(safe-area-inset-top)

补充2 安卓

left: .6rem;
left: calc(env(safe-area-inset-left) + .6rem);
left: calc(constant(safe-area-inset-left) + .6rem);
1
2
3