H5 頁面- iPhoneX 劉海屏適配
簡短的概括：
Iphonex 劉海屏適配解決方案(項目常用)
iphonex之后引入的新概念，安全區(qū)域指的是一個可視窗口范圍，處于安全區(qū)域的內(nèi)容不受圓角、齊劉海、小黑條影響。Hybrid 頁面在 iPhoneX 上劉海屏的適配也是每個前端開發(fā)的小伙伴都會碰到的問題，今天就記錄一下關(guān)于劉海屏適配的部分經(jīng)驗。
H5劉海屏 - 基礎(chǔ)
很明顯，在討論適配之前，我們的頁面一般有兩種分類：
1、H5 頁面使用原生 App 的 Navigation Bar 導(dǎo)航欄，此時，status bar 狀態(tài)欄和導(dǎo)航欄都是原生控件，我們只需要專注的適配底部小黑條處的高度差異即可。
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 標(biāo)簽的一個擴(kuò)展，用于設(shè)置網(wǎng)頁在可視窗口的布局方式，可設(shè)置 三個值：
1) auto 默認(rèn);
2) contain 可視窗口完全包含網(wǎng)頁內(nèi)容;
3) cover 網(wǎng)頁內(nèi)容完全覆蓋可視窗口，即頁面完全充滿屏幕;
2､constant(safe-area-inset-*)函數(shù)
iOS11 新增特性，Webkit 的一個 CSS 函數(shù)，用于設(shè)獲取安全區(qū)域與邊界的距離，有四個預(yù)定義的變量(單位是px)：
1) safe-area-inset-left：安全區(qū)域距離左邊界距離，橫屏?xí)r適配;
2) safe-area-inset-right：安全區(qū)域距離右邊界距離，橫屏?xí)r適配;
3) safe-area-inset-top：安全區(qū)域距離頂部邊界距離，豎屏下劉海屏為44px，iphone6系列20px，豎屏劉海適配關(guān)鍵;
4) safe-area-inset-bottom：安全區(qū)域距離底部邊界距離，豎屏下為34px，豎屏小黑條適配關(guān)鍵;
適配的核心是：通過 constant() 可以獲取到非安全邊距，再結(jié)合 padding 或 margin 來控制頁面元素避開非安全區(qū)域。
二、頁面適配代碼
1) 在為頁面適配劉海屏之前，我們首先得在頁面的 meta 中添加一個新的值：
- <meta name="viewport" content="viewport-fit=cover">
2) 設(shè)置高度：
- //為導(dǎo)航欄+狀態(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);
擴(kuò)展：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){
- // 頭部劉海屏設(shè)置
- .title-bar {
- padding-top: constant(safe-area-inset-top); //為導(dǎo)航欄+狀態(tài)欄的高度 88px
- padding-top: env(safe-area-inset-top);
- }
- // 底部劉海屏設(shè)置
- .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);
當(dāng)使用 yarn install 或者 npm install 安裝依賴包會有報錯：
解決方案：用的 cnpm install。
2) h5兼容iPhoneX底部劉海屏
當(dāng)把按鈕使用絕對定位到屏幕底部的時候，iPhonex底部劉海屏?xí)趽醯撞堪粹o，這時候只需加一句代碼就可解決問題。
- .iPhonex-style{
- bottom:evn(safe-area-inset-buttom);
- }
【編輯推薦】
