[[404347]]

簡短的概括：

Iphonex 劉海屏適配解決方案(項目常用)

iphonex之后引入的新概念，安全區(qū)域指的是一個可視窗口范圍，處于安全區(qū)域的內(nèi)容不受圓角、齊劉海、小黑條影響。Hybrid 頁面在 iPhoneX 上劉海屏的適配也是每個前端開發(fā)的小伙伴都會碰到的問題，今天就記錄一下關于劉海屏適配的部分經(jīng)驗。

H5劉海屏 - 基礎

很明顯，在討論適配之前，我們的頁面一般有兩種分類：

1、H5 頁面使用原生 App 的 Navigation Bar 導航欄，此時，status bar 狀態(tài)欄和導航欄都是原生控件，我們只需要專注的適配底部小黑條處的高度差異即可。

2、H5 頁面在 iOS 中占據(jù)全屏頁面，在這種情況下，除了要兼顧底部小黑條，我們還要處理頁面上部跟 狀態(tài)欄接觸的部分，避免內(nèi)容出現(xiàn)在狀態(tài)欄上。

一、劉海屏顯示

iPhone8之前的常規(guī)屏幕和劉海屏 Safe Area 區(qū)域的對比圖。

二、屏幕尺寸適配

H5劉海屏 - 實踐

一、原理與源碼

1､viewport-fit

iOS11 新增特性，蘋果公司為了適配 iPhoneX等劉海屏， 對現(xiàn)有 viewport meta 標簽的一個擴展，用于設置網(wǎng)頁在可視窗口的布局方式，可設置 三個值：

1) auto 默認;

2) contain 可視窗口完全包含網(wǎng)頁內(nèi)容;

3) cover 網(wǎng)頁內(nèi)容完全覆蓋可視窗口，即頁面完全充滿屏幕;

2､constant(safe-area-inset-*)函數(shù)

iOS11 新增特性，Webkit 的一個 CSS 函數(shù)，用于設獲取安全區(qū)域與邊界的距離，有四個預定義的變量(單位是px)：

1) safe-area-inset-left：安全區(qū)域距離左邊界距離，橫屏時適配;

2) safe-area-inset-right：安全區(qū)域距離右邊界距離，橫屏時適配;

3) safe-area-inset-top：安全區(qū)域距離頂部邊界距離，豎屏下劉海屏為44px，iphone6系列20px，豎屏劉海適配關鍵;

4) safe-area-inset-bottom：安全區(qū)域距離底部邊界距離，豎屏下為34px，豎屏小黑條適配關鍵;

適配的核心是：通過 constant() 可以獲取到非安全邊距，再結(jié)合 padding 或 margin 來控制頁面元素避開非安全區(qū)域。

二、頁面適配代碼

1) 在為頁面適配劉海屏之前，我們首先得在頁面的 meta 中添加一個新的值：

<meta name="viewport" content="viewport-fit=cover"> 

2) 設置高度：

//為導航欄+狀態(tài)欄的高度 88px 
padding-top: constant(safe-area-inset-top); 
padding-top: env(safe-area-inset-top); 
 
//為底下圓弧的高度 34px 
padding-bottom: constant(safe-area-inset-bottom); 
padding-bottom: env(safe-area-inset-bottom); 

擴展：css 函數(shù) env() 和 constant()

這兩個函數(shù)都是 webkit 中 css 函數(shù)，可以直接使用變量函數(shù)，只有在 webkit 內(nèi)核下才支持。

1) env 函數(shù)：必須在 ios >= 11.2 才支持;

2) constant 函數(shù)：必須 ios < 11.2 支持

H5劉海屏 - 機型適配

1､精確到機型做適配

通過寬高、像素比來判斷機型，也可以做具體適配：

// ******* 正常 ios手機 劉海屏處理 ***********/ 
// iphoneX、iphoneXs、iphone11 Pro 
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3), 
// iphone 12、iphone 12 Pro 
only screen and (device-width: 390px) and (device-height: 884px) and (-webkit-device-pixel-ratio:3), 
// iphone Xs Max、iphone11 Pro Max 
only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3), 
// iphone XR、iphone 11 
only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2), 
// iphone 12 Pro Max 
only screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio:3){ 
  // 頭部劉海屏設置 
  .title-bar { 
    padding-top: constant(safe-area-inset-top); //為導航欄+狀態(tài)欄的高度 88px 
    padding-top: env(safe-area-inset-top); 
  } 
  // 底部劉海屏設置 
  .tab-bar { 
    padding-bottom: constant(safe-area-inset-bottom);//為底下圓弧的高度 34px 
    padding-bottom: env(safe-area-inset-bottom); 
  } 
 
} 

2､踩坑日志

1) 通過css3的calc計算距離

padding-top: calc(constant(safe-area-inset-top) - 68px); 
padding-top: calc(env(safe-area-inset-top) - 68px); 

當使用 yarn install 或者 npm install 安裝依賴包會有報錯：

解決方案：用的 cnpm install。

2) h5兼容iPhoneX底部劉海屏

當把按鈕使用絕對定位到屏幕底部的時候，iPhonex底部劉海屏會遮擋底部按鈕，這時候只需加一句代碼就可解決問題。

.iPhonex-style{ 
 bottom:evn(safe-area-inset-buttom); 
} 

 【編輯推薦】