iPhone X 兼容

在小程序頁面開發中，涉及到需要適配 iPhone X 的地方主要有：導航欄（NavigationBar），標簽欄（TabBar）以及頁面底部的吸底按鈕。

對于position: fixed的可交互組件，如果渲染在iPhone X的安全區域外，容易誤觸 Home Indicator，應當把可交互的部分都渲染到安全區域內。

建議使用以下 wxss 進行兼容

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);  //iphoneX以上會多出一部分home indicator區域

適配方案：

1、meta標簽中設置網頁在可視窗口的布局方式

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

2、fixed 完全吸底元素場景的適配

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

3、fixed 非完全吸底元素場景的適配

{
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}

另外一種方法：

1、在app.js的onLaunch函數內調用wx.getSystemInfo，獲得手機型號（res.model），并存儲為全局變量：

onLaunch: function() {
    let _self = this;
    wx.getSystemInfo({
      success: res => {
        let modelmes = res.model;
        if (modelmes.search('iPhone X') != -1) {
          _self.globalData.isIphoneX = true
        }
        wx.setStorageSync('modelmes', modelmes)
      }
    })
}

2.在所需頁面的js文件的onLoad函數內從全局變量里面拿出來第一步存儲的手機型號值，這里設置為isIphoneX：

onLoad: function(options) 
    let modelmes = wx.getStorageSync('modelmes');
    let isIphoneX = app.globalData.isIphoneX;
    this.setData({
      isIphoneX: isIphoneX
    })
  }

3.在所需頁面的wxml里面根據手機型號是否為iPhone X 來運用三元運算符判斷底部的位置就可以啦：

<view class="footer" style="margin-bottom: {{isIphoneX ? '68rpx' : '0rpx'}};"></view>

移動端適配方案 viewport

1、利用 meta 標簽設置 viewport

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

width：控制 viewport 的大小，可以指定的一個值，如 600，或者特殊的值，如 device-width 為設備的寬度（單位為縮放為 100% 時的 CSS 的像素）。

height：和 width 相對應，指定高度。

initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。

minimum-scale：允許用戶縮放到的最大比例。

maximum-scale：允許用戶縮放到的最小比例。

user-scalable：用戶是否可以手動縮放

上面的那段代碼的意思就是：設置頁面的 layout viewport 等于 ideal viewport 寬度，初始化的頁面縮放比為1，用戶最大/最小的縮放比都為1，頁面不允許用戶手動縮放。

2、利用postcss-px-to-viewport將px 自動轉換為 vw

（1）安裝

npm install postcss-px-to-viewport --save-dev

2）webpack配置

module.exports = {
  plugins: {
    // ...
    'postcss-px-to-viewport': {
      // options
      unitToConvert: 'px',    // 需要轉換的單位，默認為"px"
      viewportWidth: 750,     // 設計稿的視窗寬度
      unitPrecision: 5,       // 單位轉換后保留的精度
      propList: ['*', '!font-size'],        // 能轉化為 vw 的屬性列表
      viewportUnit: 'vw',     // 希望使用的視窗單位
      fontViewportUnit: 'vw', // 字體使用的視窗單位
      selectorBlackList: [],  // 需要忽略的 CSS 選擇器，不會轉為視窗單位，使用原有的 px 等單位
      minPixelValue: 1,       // 設置最小的轉換數值，如果為 1 的話，只有大于 1 的值會被轉換
      mediaQuery: false,      // 媒體查詢里的單位是否需要轉換單位
      replace: true,          // 是否直接更換屬性值，而不添加備用屬性
      exclude: undefined,     // 忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件
      include: /\/src\//,     // 如果設置了include，那將只有匹配到的文件才會被轉換
      landscape: false,       // 是否添加根據 landscapeWidth 生成的媒體查詢條件
      landscapeUnit: 'vw',    // 橫屏時使用的單位
      landscapeWidth: 1125,   // 橫屏時使用的視窗寬度
    },
  },
};

（3）標注不需要轉換的屬性

/* px-to-viewport-ignore-next */ —> 下一行不進行轉換.
/* px-to-viewport-ignore */ —> 當前行不進行轉換

/* example input: */
.class {
  /* px-to-viewport-ignore-next */
  width: 10px;
  padding: 10px;
  height: 10px; /* px-to-viewport-ignore */
}
 
/* example output: */
.class {
  width: 10px; 
  padding: 3.125vw;
  height: 10px;
}

rem轉成rpx

我們可以修改html的fontsize的大小來讓rem等于rpx

  let screenWidth=document.documentElement.clientWidth//獲取屏幕的寬度
  let centerWH=750/screenWidth//比例
  document.documentElement.style.fontSize=1/centerWH+'px' //設置html根元素fontsize的大小

微信小程序適配問題

移動端適配方案 viewport

1、利用 meta 標簽設置 viewport

rem轉成rpx