本文主要探讨了iPhoneX取消物理按键后，刘海屏带来的适配问题，尤其是底部与小黑条的适配。介绍了安全区域、viewport-fit、env() 和 constant() 等关键概念，并提供了针对fixed定位元素的适配解决方案，包括完全吸底和非完全吸底元素的处理方法。适配策略旨在确保内容在安全区域内且不影响用户体验。
iphoneX移动端适配问题
前言
iPhoneX 取消了物理按键，改为刘海屏，这一改动导致网页出现了适配问题。对于网页而言，顶部刘海部位的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。
下面是整理的移动端适配方案，希望对大家有所帮助，处理前后效果如图：
适配之前需要了解的新知识
安全区域
安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图蓝色区域：
也就是说，我们要做好适配，必须保证页面可视、可操作区域是在安全区域内。
更详细说明，参考文档：Human Interface Guideli
最低0.47元/天 解锁文章
扫一扫
3350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
