移動(dòng)端安全區(qū)域適配方案

大廠技術(shù)  高級(jí)前端  Node進(jìn)階

點(diǎn)擊上方 程序員成長(zhǎng)指北，關(guān)注公眾號(hào)
回復(fù)1，加入高級(jí)Node交流群

前言

什么是安全區(qū)域？

這個(gè)概念是蘋(píng)果??率先提出來(lái)的，因?yàn)閺?code style="color: rgb(53, 148, 247);line-height: 1.8em;letter-spacing: 0em;background: none 0% 0% / auto no-repeat scroll padding-box border-box rgba(27, 31, 35, 0.05);width: auto;height: auto;margin-left: 2px;margin-right: 2px;padding: 2px 4px;border-style: none;border-width: 3px;border-color: rgb(0, 0, 0) rgba(0, 0, 0, 0.4) rgba(0, 0, 0, 0.4);border-radius: 4px;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;word-break: break-all;">iPhone X開(kāi)始，iPhone正式進(jìn)入全面屏?xí)r代，iPhone手機(jī)也就開(kāi)始出現(xiàn)了劉海和底部的黑條的區(qū)域。Android不知道從什么時(shí)候開(kāi)始越來(lái)越喜歡模仿iPhone的設(shè)計(jì)，這也就導(dǎo)致越來(lái)越多的機(jī)型都有這個(gè)安全區(qū)域的概念。

安全區(qū)域(safe area)

?

安全區(qū)域定義為視圖中未被導(dǎo)航欄、選項(xiàng)卡欄、工具欄或視圖控制器可能提供的其他視圖覆蓋的區(qū)域。

如上圖所示，安全區(qū)域?yàn)橹虚g藍(lán)色部分，也就是說(shuō)我們?cè)陧?yè)面布局時(shí)應(yīng)該保證頁(yè)面內(nèi)容在藍(lán)色安全區(qū)域內(nèi)。

所以對(duì)于這類機(jī)型，你如果不特殊處理，那么它將會(huì)是這樣的：

這樣就會(huì)導(dǎo)致底部輸入框的交互受影響

網(wǎng)頁(yè)布局方式(viewport-fit)

在處理安全區(qū)域之前，我們需要先來(lái)了解viewport-fit屬性，這是解決問(wèn)題的關(guān)鍵。

iOS帶來(lái)問(wèn)題的同時(shí)也帶來(lái)了解決問(wèn)題的方法，為了適配 iPhoneX等全面屏機(jī)型 對(duì)現(xiàn)有 viewport meta 標(biāo)簽進(jìn)行了擴(kuò)展，用于設(shè)置視覺(jué)視口的大小來(lái)控制裁剪區(qū)域。

用法

<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=0, viewport-fit=cover">

屬性值

該屬性包含三個(gè)值：

• auto：該值不會(huì)影響初始布局視口，并且整個(gè)網(wǎng)頁(yè)都是可見(jiàn)的。UA 在視口之外繪制的內(nèi)容是未定義的。它可以是畫(huà)布的背景顏色，或者 UA 認(rèn)為合適的任何其他顏色。（默認(rèn)值，與contain表現(xiàn)一致）
• contain：初始布局視口和視覺(jué)視口設(shè)置為設(shè)備顯示屏中內(nèi)接的最大矩形。UA 在視口之外繪制的內(nèi)容是未定義的。它可以是畫(huà)布的背景顏色，或者 UA 認(rèn)為合適的任何其他顏色。
• cover：初始布局視口和視覺(jué)視口設(shè)置為設(shè)備物理屏幕的外接矩形。

區(qū)別

在非矩形顯示器上（比如手表）設(shè)置視口邊界框的大小時(shí)，我們必須考慮以下因素：

• 由于視口邊界框的面積大于顯示器的面積而導(dǎo)致的剪切區(qū)域
• 視口邊界框與顯示區(qū)域之間的間隙

contain

當(dāng)使用viewport-fit: contain時(shí)，初始視口將應(yīng)用于顯示器的最大內(nèi)接矩形。

cover

當(dāng)使用viewport-fit: cover時(shí)，初始視口將應(yīng)用于顯示器的外接矩形。

env

為了解決安全區(qū)域問(wèn)題，iOS 11 新增了一個(gè)新的 CSS 函數(shù)env()和四個(gè)預(yù)定義的環(huán)境變量

• safe-area-inset-left：安全區(qū)域距離左邊邊界距離

• safe-area-inset-right：安全區(qū)域距離右邊邊界距離

• safe-area-inset-top：安全區(qū)域距離頂部邊界距離

• safe-area-inset-bottom：安全區(qū)域距離底部邊界距離

?

iOS 11 中提供的 env() 函數(shù)名為 constant()。從 Safari 技術(shù)預(yù)覽版 41 和 iOS 11.2 beta 開(kāi)始，constant() 已被刪除并替換為 env()。如有必要，您可以使用 CSS 后備機(jī)制來(lái)支持這兩個(gè)版本，但以后應(yīng)該更喜歡使用 env()。—— 來(lái)自webkit文檔

上面的意思是從iOS12開(kāi)始不再支持使用constant函數(shù)，所以為了兼容處理，我們應(yīng)該這樣寫(xiě)：

body {
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}

使用該函數(shù)的前提是必須設(shè)置meta標(biāo)簽viewport-fit=cover ，并且對(duì)于不支持 env() 的瀏覽器，瀏覽器將會(huì)忽略它。

適配安全區(qū)域

第一步：

修改頁(yè)面布局方式

<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=0, viewport-fit=cover">

第二步：

底部適配

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

這樣安全區(qū)域問(wèn)題就解決了！

最后

Node 社群

    

     

      

       

        

       
       

        

       
      
     
    
我組建了一個(gè)氛圍特別好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你對(duì)Node.js學(xué)習(xí)感興趣的話（后續(xù)有計(jì)劃也可以），我們可以一起進(jìn)行Node.js相關(guān)的交流、學(xué)習(xí)、共建。下方加 考拉 好友回復(fù)「Node」即可。
   “分享、點(diǎn)贊、在看” 支持一下