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-dev2）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的大小
