微信小程序适配问题

最近项目到了要适配各个机型的进度了，又开始为此有些头疼，不仅要顾着苹果的几个机型，安卓的更是问题。

官方文档给出了rpx这个尺寸单位。

rpx适配

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。

规定屏幕宽为750rpx，在所有设备上都是如此

1rpx=（screenWidth / 750）px，其中screenWidth为手机屏幕的实际的宽度（单位px），例如iphone6的screenWidth=375px，则在iphone6中1rpx=0.5px

vw、vh适配

vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。

小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw

小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh

近期写地图用高度100%，就无效，设置地图高度为100vh就好使了。

ipnone X适配

首先通过 wx.getSystemInfo 接口取获取设备信息

wx.getSystemInfo({

      success: function (res) {

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

                 this.setData({

                        isIphoneX: true

                  })

           }

      }

})

注：上面是我看度娘的搜索答案都是这样写的，放到项目中用iPhoneX运行，发现：

真机运行结果

1、模拟器上model输出的结果是：iPhone X。

2、真机上model输出的结果是：iPhone X + 系统版本号

所以，上面判断用res.model == 'iphonrx',是始终不会往下走方法的，因为model根本不等于那个，就算等于，真机上后面还多了版本号的输出，还是行不通

因此，我将等于改成了indexOf，判断是否包含iPhone X这个字符串。

indexOf用法