iphoneX類型手機(jī)在外觀上有三個(gè)改動(dòng)：圓角（corners）、劉海（sensor housing）和小黑條（Home Indicator）。為了適配這些手機(jī)，安全區(qū)域這個(gè)概念變誕生了：安全區(qū)域就是一個(gè)不受上面三個(gè)效果的可視窗口范圍。
為了保證頁面的顯示效果，我們必須把頁面限制在安全范圍內(nèi)，但是不影響整體效果。
viewport-fit是專門為了適配iPhoneX而誕生的一個(gè)屬性，它用于限制網(wǎng)頁如何在安全區(qū)域內(nèi)進(jìn)行展示，它有兩個(gè)值，
contain（默認(rèn)）: 可視窗口完全包含網(wǎng)頁內(nèi)容
cover：網(wǎng)頁內(nèi)容完全覆蓋可視窗口
我們需要將頂部和底部合理的擺放在安全區(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后才能使用env、constant這兩個(gè)函數(shù)
<meta name="viewport" content="viewport-fit=cover">
.component {
? ??padding-bottom: constant(safe-area-inset-bottom);
????padding-bottom: env(safe-area-inset-bottom);
}
注：constant在iOS < 11.2的版本中生效，env在iOS >= 11.2的版本中生效，css中往往要同時(shí)設(shè)置他們，將頁面限制在安全區(qū)域內(nèi)
