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

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">

方法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 兼容写法

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);

最后

以上就是清秀红酒为你收集整理的iPhoneX 安全区域 safe-area-inset-*样式不生效的全部内容，希望文章能够帮你解决iPhoneX 安全区域 safe-area-inset-*样式不生效所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。