概述
以 iPhoneX 為例拧粪，頂部有劉海修陡，下面有小黑條，四個角還有圓角可霎，如果不做好適配魄鸦，很有可能導致頁面遮擋、操作沖突等問題癣朗，所以我們需要將頁面內(nèi)容控制在安全區(qū)域拾因，即可視窗口區(qū)域。
IOS如何適配旷余？
第一步绢记，設(shè)置網(wǎng)頁在可視窗口的布局方式。
<meta name="viewport" content="width=device-width, viewport-fit=cover" />
這是 IOS11.2 新增的特性正卧，蘋果為了適配 iPhoneX 對現(xiàn)有 viewport meta 標簽的一個拓展蠢熄，viewport-fit 可設(shè)置三個值，具體可見 The viewport-fit descriptor ：
- contain：可視窗口完全包含網(wǎng)頁內(nèi)容
- cover：網(wǎng)頁內(nèi)容完全覆蓋可視窗口
- auto：默認值炉旷，跟contain表現(xiàn)一致
第二步签孔，頁面主體內(nèi)容限制在安全區(qū)域內(nèi)
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
.page {
/* ios < 11.2 */
padding-left: constant(safe-area-inset-left);
padding-top: constant(safe-area-inset-top);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
/* ios >= 11.2 */
padding-left: env(safe-area-inset-left);
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
}
}
@supports 用于檢測是否支持 safe-area-inset叉讥。
安卓如何適配？
目前安卓并沒有很好的適配方案饥追，如果涉及到沉浸式體驗图仓，建議讓客戶端進行劉海適配，客戶端可以獲取到劉海的高度但绕。如果客戶端不支持救崔，則可設(shè)置為 28px，此高度可適配大多數(shù)安卓劉海屏捏顺。
.page.android {
padding-top: 28px;
}
