起因：项目iOS APP内嵌H5页面，提供的webview容器是全屏的，所以H5页面要处理iPhone X的刘海头。
iPhone XS等手机还未发布之前，我们已经做过iPhone X的一些兼容，代码如下：
var isIPhoneX = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812;
如果是iPhone X，把顶部增加高度30px的容器垫高，避开刘海头区域，这样标题正好从刘海头下面开始展示，如下图：
因为自己当时还没有用iPhone X，只知道iPhone X有刘海头，不知道其他细节问题。
到了9月份，苹果发布了iPhone XS、iPhone XS Max、iPhone XR，有同事在Mac下的iPhone模拟器访问，发现这个页面iPhone XS Max下有问题。我研究了下，原来当初只判断了iPhone X加垫高，其他几个机型都未判断，所以就很自然的写了新机型，加上判断：
// iPhone X、iPhone XS
var isIPhoneX = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812;
// iPhone XS Max
var isIPhoneXSMax = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896;
// iPhone XR
var isIPhoneXR = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896;
原来代码是if(isIPhoneX)垫高，现在改成if(isIPhoneX || isIPhoneXSMax || isIPhoneXR)垫高，这个事情就过去了，因为这个时候只是发布新iPhone，并未销售。
到9月底，我自己买了iPhone XS，因为天天用，发现苹果的设计规范头部这里有蹊跷，规范里的标题全部不是刘海头下方上下居中，而是靠下，如图：
很明显，我做的兼容头部，标题“分类”二字正好是在刘海头下方上下居中，而官方的头部标题，“照片”二字、左侧返回、右侧“选择”全部靠下。看了其他的APP，包括微信等，全部是靠下的。
无意中发现，原来标题靠下，是留给返回按钮的：
真是恍然大悟，难怪官方提供的安全区域代码constant(safe-area-inset-top) env(safe-area-inset-top)，使用后都在刘海头下面，如图（黑灰色区域状态栏）：
当初没有用安全区域代码，一方面是因为页面有悬浮容器，会悬浮到安全区域外部，兼容页面正文麻烦，另一方面就是正文内容靠下，离刘海头有一段距离，感觉太丑干脆不用。
总结：依旧不用安全区域代码，如果要做刘海头，if(isIPhoneX || isIPhoneXSMax || isIPhoneXR)垫高44px。
备注：iPhone X、iPhone XS、iPhone XS Max刘海头高度30px，iPhone XR刘海头高度33px，效果见本文第一张图。本文提到的30px、33px、44px，均为initial-scale=1下。设计稿像素应该都需要乘以2倍或3倍。
本文有参考《iPhoneXS、XS Max与iPhoneXR 适配》
貌似好久没来了，设计跟进苹果哈。
苹果的还是很有市场
非常操蛋的设计
博主更新好慢