在 iPhoneX發(fā)布后，許多廠商相繼推出了具有邊緣屏幕的手機(jī)。
這些手機(jī)和普通手機(jī)在外觀上無外乎做了三個(gè)改動(dòng)：圓角（ corners）、劉海（ sensor housing）和小黑條（ HomeIndicator）。為了適配這些手機(jī)，安全區(qū)域這個(gè)概念變誕生了：安全區(qū)域就是一個(gè)不受上面三個(gè)效果的可視窗口范圍。
為了保證頁面的顯示效果，我們必須把頁面限制在安全范圍內(nèi)，但是不影響整體效果。

1.viewport-fit
viewport-fit是專門基于iphonex誕生的一個(gè)屬性，用于現(xiàn)在網(wǎng)頁如何讓在安全區(qū)域進(jìn)行顯示

微信圖片_20190520163812.jpg

2.env、constant
我們需要將頂部和底部合理的擺放在安全區(qū)域內(nèi)， iOS11新增了兩個(gè) CSS函數(shù) env、constant，用于設(shè)定安全區(qū)域與邊界的距離。
函數(shù)內(nèi)部可以是四個(gè)常量：
safe-area-inset-left：安全區(qū)域距離左邊邊界距離
safe-area-inset-right：安全區(qū)域距離右邊邊界距離
safe-area-inset-top：安全區(qū)域距離頂部邊界距離
safe-area-inset-bottom：安全區(qū)域距離底部邊界距離
注意：我們必須指定 viweport-fit后才能使用這兩個(gè)函數(shù)：
<meta name="viewport" content="viewport-fit=cover">
constant在 iOS<11.2的版本中生效， env在 iOS>=11.2的版本中生效，這意味著我們往往要同時(shí)設(shè)置他們，將頁面限制在安全區(qū)域內(nèi)：

body {
  padding-bottom: constant(safe-area-inset-bottom),
  padding-bottom: env(safe-area-inset-bottom)
}

當(dāng)使用底部固定導(dǎo)航欄時(shí)，要為他們?cè)O(shè)置相應(yīng)的padding值：

{
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom)
}