本文主要探讨了iPhone x及其后续型号取消物理按键后，底部小黑条对网页适配带来的问题。内容集中在如何处理底部fixed定位元素的适配，确保网页内容在安全区域内显示和操作。
iPhone x/iPhone xr/iPhone 11pro/iPhone 11/iPhone 12 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。
安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图蓝色区域：
也就是说，我们要做好适配，必须保证页面可视、可操作区域是在安全区域内。
1.<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
2.针对底部fixed 元素的适配
{
height: calc(
最低0.47元/天 解锁文章
扫一扫
2675
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
