对于
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一起使用。