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

與iPhone6/6s/7/8相比，iPhone X 無論是在屏幕尺寸、分辨率、甚至是形狀上都發(fā)生了較大的改變，下面以iPhone 8作為參照物，先看看iPhone X尺寸上的變化：

蘋果對(duì)于 iPhone X 的設(shè)計(jì)布局意見如下：

核心內(nèi)容應(yīng)該處于 Safe area 確保不會(huì)被設(shè)備圓角(corners)，傳感器外殼(sensor housing，齊劉海) 以及底部的 Home Indicator 遮擋。也就是說 我們?cè)O(shè)計(jì)顯示的內(nèi)容應(yīng)該盡可能的在安全區(qū)域內(nèi)；

二、h5頁(yè)面適配

1、viewport-fit的meta標(biāo)簽作為適配方案；viewport-fit的默認(rèn)值是auto。

viewport-fit取值如下：

2、css constant()函數(shù) 與safe-area-inset-top & safe-area-inset-left & safe-area-inset-right & safe-area-inset-bottom的介紹.

當(dāng)我們?cè)O(shè)置viewport-fit:contain,也就是默認(rèn)的時(shí)候時(shí);設(shè)置safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom等參數(shù)時(shí)不起作用的。當(dāng)我們?cè)O(shè)置viewport-fit:cover時(shí)：設(shè)置如下

body {

  padding-top: constant(safe-area-inset-top);  //為導(dǎo)航欄+狀態(tài)欄的高度 88px      

  padding-left: constant(safe-area-inset-left);  //如果未豎屏?xí)r為0        

  padding-right: constant(safe-area-inset-right); //如果未豎屏?xí)r為0        

  padding-bottom: constant(safe-area-inset-bottom);//為底下圓弧的高度 34px    

} 

三、小程序適配

viewport-fit的適配方案不適合小程序。目前也沒有看到小程序有對(duì)iPhone X等異形屏有特殊的接口或字段。小程序本身的底部tab欄對(duì)iPhone X的適配也只是簡(jiǎn)單的加了一個(gè)白色底欄，提高了原有tab欄的位置。我們只能通過 wx.getSystemInfo 接口取獲取設(shè)備信息，該接口使用方法如下：

wx.getSystemInfo({

   success: function (res) {

      if (res.model == 'iphonrx') {

         this.setData({

            isIphoneX: true

         })

      }

   }

})　 

其中 model 便是設(shè)備的型號(hào)等信息，如果 model 值為iphonerx ，便可認(rèn)為該設(shè)備為iPhone X，我們?cè)谌肟谖募?app.js 中去進(jìn)行檢測(cè)，然后在全局增加一個(gè) isIphoneX 字段。

wxml部分：

<view class="button-group {{isIphoneX ?'fix-iphonex-button':''}}">這是一個(gè)吸底按鈕區(qū)域</view> 

wxss部分：

.fix-iphonex-button {
  bottom:68rpx!important;
}

.fix-iphonex-button::after {
  content: ' ';
  position: fixed;
  bottom: 0!important;
  height: 68rpx!important;
  width: 100%;
  background: #fff;
} 

至于為什么采用 68rpx，

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論