本文介绍如何通过修改viewportmeta标签及使用CSS样式来适配iPhone X的安全区域，避免页面内容被状态栏或刘海屏遮挡。具体方法包括为viewportmeta标签添加viewport-fit=cover属性，并为body和fixed定位元素设置padding-bottom以预留安全区域。
// 1.viewport meta 标签增加属性viewport-fit=cover
// 2.body元素增加样式 body { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } // 3.如有fixed底部的元素，也增加上面样式 xxx { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); background-color: #fff; // 记得添加background-color，不然会出现透明镂空的情况 }转载于:https://juejin.im/post/5abf4e586fb9a028c675d4f7
扫一扫
800
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
