最近在写一个H5的app, 顶部和底部都是用固定定位（{position:fixed;}），但是在iphoneX上面显示会超出屏幕，固定的位置也不稳定。
解决方法：
1、index.html中<meta />中添加 viewport-fit=cover
<meta name="viewport" content="..., viewport-fit=cover" />
2、给固定的header和footer添加css样式：
/* 适配iphoneX顶部填充*/
@supports (top: env(safe-area-inset-top)){
body,
.header{
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
}
/* 判断iphoneX 将 footer 的 padding-bottom 填充到最底部 */
@supports (bottom: env(safe-area-inset-bottom)){
body,
.footer{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}
参考：
关于H5页面在iPhoneX适配
