微信小程序iPhoneX 底部虛擬Home鍵區(qū)域適配方案

為什么要適配？

先看下iPhoneX和之前的iPhone的區(qū)別，如下圖

可以看出主要是頂部和底部多了一些區(qū)域，如果頁面內(nèi)容進(jìn)入該區(qū)域，有可能會(huì)導(dǎo)致：

1. 內(nèi)容被遮擋；
2. 內(nèi)容和虛擬Home鍵重疊而引起誤操作；

因此，我們需要對(duì)iPhoneX進(jìn)行一些必要的適配。

怎么適配？

因?yàn)槲覀円龅氖俏⑿判〕绦虻倪m配，而我們開發(fā)的頁面運(yùn)行在微信里面，頂部空間微信已經(jīng)做了適配，所以我們僅需對(duì)底部虛擬Home鍵區(qū)域進(jìn)行適配即可（自定義導(dǎo)航例外）。

這里有兩種情況：

1. 底部無懸浮物件的情況
2. 底部有懸浮物件的情況

底部無懸浮物件的情況

只要把頁面內(nèi)容容器的下內(nèi)邊距設(shè)置為虛擬Home鍵區(qū)域的高度即可。

底部有懸浮物件的情況

需把懸浮物件的下內(nèi)邊距設(shè)置為虛擬Home鍵區(qū)域的高度，并且頁面內(nèi)容容器的下內(nèi)邊距設(shè)置為懸浮物件的高度（原懸浮物件高度+虛擬Home鍵區(qū)域高度）。

具體實(shí)現(xiàn)

• 虛擬Home鍵區(qū)域的高度：

  iOS11 的Webkit 的新增了一個(gè) CSS env()，用于獲取安全區(qū)域與邊界的距離，有四個(gè)預(yù)定義的變量：

  • safe-area-inset-left：安全區(qū)域距離左邊邊界距離
  • safe-area-inset-right：安全區(qū)域距離右邊邊界距離
  • safe-area-inset-top：安全區(qū)域距離頂部邊界距離
  • safe-area-inset-bottom：安全區(qū)域距離底部邊界距離

• 定義css變量

  page{
    /* 使用css變量定義安全邊距 */
    --iphonex-fix-bottom:0;
    --iphonex-fix-bottom: constant(safe-area-inset-bottom); /* iOS11.2 beta 開始被棄用 */
    --iphonex-fix-bottom: env(safe-area-inset-bottom);
  }
  

• 應(yīng)用安全邊距

  .container{
    /* 應(yīng)用安全邊距 */
    padding-bottom:var(--iphonex-fix-bottom);
  }
  

具體實(shí)現(xiàn)代碼見以下代碼片段：

https://developers.weixin.qq.com/s/cgxGsZmj7ukG