哇呀呀~又要适配iPhone14药丸屏了

[yq]

背景

防不胜防啊，iPhone 14 Pro和iPhone 14 Pro Max新出的药丸屏，顶部安全区域的高度和之前的刘海屏高度不一样，有些页面样式有问题。

怎么做

IOS统一使用safeArea安全区域进行适配。

屏幕上安全距离: safe-area-inset-top
屏幕右安全距离: safe-area-inset-right
屏幕下安全距离: safe-area-inset-bottom
屏幕左安全距离: safe-area-inset-left

Android呢

Android沉浸屏也要适配顶部和左边。但没有专门的CSS，经验值可以采用固定值20px

padding-bottom: 20px; /*不支持safeArea场景（含Android）*/
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

还有种方案是让native提供个bridgejs API专门获取Android沉浸屏状态栏高度。

参考：

1. 网页适配 iPhoneX，就是这么简单
2. 官方：Designing Websites for iPhone X
3. PPK：safe-area-inset values on iOS11
4. iPhone X适配没那么复杂，但也不是看上去这么简单
5. env(safe-area-inset-top) not working on Android Pie + WebView 69