前端iPhone刘海屏适配

对于iPhone系列出的越来越多，如果只是使用@media来做适配的话，老代码想要适配新机型还是有一定局限性的。
今天去搜了搜相关的解决方法，那么就来总结一下。

安全区

早期苹果对于 iPhone X 的设计布局意见如下：

核心内容应该处于 Safe area 确保不会被设备圆角(corners)，传感器外壳(sensor housing，齐刘海) 以及底部的 Home Indicator 遮挡。也就是说 我们设计显示的内容应该尽可能的在安全区域内。

区域划分

下面两张图简单的描述了安全区域的划分细节：

适配方案

通过在meta标签中设置viewport-fit来实现安全区适配

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

viewport-fit 取值：

值	描述
viewport-fit=auto	默认值，页面内容显示在safe area内
viewport-fit=cover	页面内容充满屏幕

CSS constant()函数与env()函数

在iOS 11中的webkit包含了一个新的CSS函数constant()，以及一组四个预定义的常量：safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom。当合并一起使用时，允许样式引用每个方面的安全区域的大小。
只有当我们设置 viewport-fit=cover的时候上述的常量才能生效。

写法如下：

/* 兼容 iOS < 11.2 */
body {
    padding-top: constant(safe-area-inset-top);   //为导航栏+状态栏的高度 88px            
    padding-left: constant(safe-area-inset-left);   //如果未竖屏时为0                
    padding-right: constant(safe-area-inset-right); //如果未竖屏时为0                
    padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px       
}
/* 兼容 iOS >= 11.2 */
body {
    padding-top: env(safe-area-inset-top);   //为导航栏+状态栏的高度 88px            
    padding-left: env(safe-area-inset-left);   //如果未竖屏时为0                
    padding-right: env(safe-area-inset-right); //如果未竖屏时为0                
    padding-bottom: env(safe-area-inset-bottom);//为底下圆弧的高度 34px       
}

因此在我们做iPhone适配的时候，最好是constant和env一起使用。