大家都知道，iphoneX猖吴，屏幕頂部都有一個齊劉海，iPhoneX 取消了物理按鍵挥转，改成底部小黑條海蔽，如果不做適配共屈，這些地方就會被遮擋，因此本文講述下齊劉海與底部小黑條的適配方法党窜。
幾個新概念
安全區(qū)域
安全區(qū)域指的是一個可視窗口范圍拗引，處于安全區(qū)域的內(nèi)容不受圓角（corners）、齊劉海（sensor housing）幌衣、小黑條（Home Indicator）影響矾削，如下圖所示：
image.png
viewport-fit
iOS11 新增特性，蘋果公司為了適配 iPhoneX 對現(xiàn)有 viewport meta 標(biāo)簽的一個擴展豁护，用于設(shè)置網(wǎng)頁在可視窗口的布局方式哼凯，可設(shè)置三個值：
- contain: 可視窗口完全包含網(wǎng)頁內(nèi)容（左圖）
- cover：網(wǎng)頁內(nèi)容完全覆蓋可視窗口（右圖）
- auto：默認(rèn)值，跟 contain 表現(xiàn)一致
constant 函數(shù)
iOS11 新增特性楚里，Webkit 的一個 CSS 函數(shù)断部，用于設(shè)定安全區(qū)域與邊界的距離，有四個預(yù)定義的變量（單位是px）：
- safe-area-inset-left：安全區(qū)域距離左邊界距離
- safe-area-inset-right：安全區(qū)域距離右邊界距離
- safe-area-inset-top：安全區(qū)域距離頂部邊界距離
- safe-area-inset-bottom：安全區(qū)域距離底部邊界距離
注意：網(wǎng)頁默認(rèn)不添加擴展的表現(xiàn)是 viewport-fit=contain班缎，需要適配 iPhoneX 必須設(shè)置 viewport-fit=cover蝴光，不然constant 函數(shù)是不起作用的，這是適配的必要條件达址。
官方文檔中提到將來 env()要替換 constant ()蔑祟，目前還不可用。
適配例子
第一步：設(shè)置網(wǎng)頁在可視窗口的布局方式
<meta name='viewport' content="width=device-width, viewport-fit=cover" />
第二步：頁面主體內(nèi)容限定在安全區(qū)域內(nèi)
body {
/* 適配齊劉海*/
padding-top: constant(safe-area-inset-top);
/* 適配底部黑條*/
padding-bottom: constant(safe-area-inset-bottom);
}
第三步：fixed 元素的適配
- bottom 不是0的情況
// bottom 不是0的情況
.fixed {
bottom: calc(50px(原來的bottom值) + constant(safe-area-inset-bottom));
}
- 吸底的情況（bottom=0）
/* 方法1 ：設(shè)置內(nèi)邊距 擴展高度*/
/* 這個方案需要吸底條必須是有背景色的沉唠，因為擴展的部分背景是跟隨外容器的疆虚，否則出現(xiàn)鏤空情況。*/
.fix {
padding-bottom: constant(safe-area-inset-bottom);
}
/* 直接擴展高度*/
.fix {
height: calc(60px(原來的高度值) + constant(safe-area-inset-bottom));
}
/* 方法2 ：在元素下面用一個空div填充右冻， 但是背景色要一致 */
.blank {
position: fixed;
bottom: 0;
height: 0;
width: 100%;
height: constant(safe-area-inset-bottom);
background-color: #fff;
}
/* 吸底元素樣式 */
.fix {
margin-bottom: constant(safe-area-inset-bottom);
}
最后： 使用@supports
因為只有有齊劉海和底部黑條的機型才需要適配樣式装蓬，可以用@support配合使用：
@supports (bottom: constant(safe-area-inset-bottom)) {
body {
padding-bottom: constant(safe-area-inset-bottom);
}
}
