安全区域？

安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图蓝色区域：

废话不多说，平时常说的iphoneX适配主要是指手机下方的小黑条不遮挡页面内容，比如底部按钮等，要做一些几步：

一、设置viewport-fit

在index.html设置 viewport-fit=cover

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

苹果公司为了适配 iPhoneX 对现有 viewport meta 标签新增扩展cover属性

二、使用env() 和 constant()

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

• safe-area-inset-left：安全区域距离左边边界距离

• safe-area-inset-right：安全区域距离右边边界距离

• safe-area-inset-top：安全区域距离顶部边界距离

• safe-area-inset-bottom：安全区域距离底部边界距离 这里我们主要考虑底部小黑条，所以主要使用safe-area-inset-bottom，其他变量以此类推

padding-bottom: constant( safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ 
padding-bottom: env( safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

注意：

1、当 viewport-fit=contain 时 env() 是不起作用的，必须要配合 viewport-fit=cover 使用。对于不支持env() 的浏览器，浏览器将会忽略它。

2、env() 跟 constant() 需要同时存在，而且顺序不能换。

三、@supports 隔离兼容样式

我们只希望 iPhoneX 才需要新增适配样式，可以配合 @supports 来隔离兼容样式

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) 
{ 
    .content { 
        margin-bottom: constant(safe-area-inset-bottom); 
        margin-bottom: env(safe-area-inset-bottom); 
     } 
 }

主要就是constant(safe-area-inset-bottom)和env(safe-area-inset-bottom)这两个变量的使用，具体是给内边距还是盒子高度，可以根据实际情况使用，也可以封装一个组件，在需要适配iphoneX的页面引入即可

四、使用过程中遇到的问题：

• 1、在微信小程序的webview中，获取safe-area-inset-bottom没生效， 原因：后来检查是index.html的标签设置内容有误，设置了maximum-scale=1, minimum-scale=1，导致viewport-fit=cover没生效，只需要设置一个

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

• 2、在页面底部使用fixed布局时，使用封装好的组件不生效 原因：我们要将自己封装的组件当成一个普通的盒子，使用fixed布局要考虑重叠问题