iPhoneX对比起以前其他的手机，屏幕顶部变成了留海屏，底部取消了物理按键改成了小黑条，这种改动导致了web开发中页面上新的适配问题。
比如一些需要贴在底部的按钮，和呼起的tabBar和底部弹出框，在iphoneX上就会出现被小黑条遮挡内容，或者页面上出现白色空隙的问题。
在public/index.html head 标签中添加 meta 标签
<head>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" name="viewport"/>
</head>在footer底部 设置样式
body {height: 100vh;}
/* 你的贴底元素↓ */
.container {
position: absolute;
bottom: 0;
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
...
}
4602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
