小程序针对Pad端适配

前言：最近新接到的项目，主要是小程序开发 分为客户端和商家端 客户端没什么说的 就是正常的小程序开发 商家端需要适配ipad 并且只适配pad端即可 所以遇到了小程序适配pad端的一些问题 开始拿到设计稿后就正常开发但是发现用rpx作为布局单位在pad端显示的很魔幻 所以用px作为单位 我自己有一个ipad air5 做完之后在上面展示的很完美 但是客户在验收的时候用的是android的pad 发现样式什么的和我的设备表演差异特别大 后来就研究了下 以下是步骤
查看设备实际可用尺寸 px

wx.getSystemInfoAsync({
      success (res) {
        console.log(res.model)
        console.log(res.pixelRatio)
        console.log(res.windowWidth)
        console.log(res.windowHeight)
        console.log(res.language)
        console.log(res.version)
        console.log(res.platform)
      }
    })

发现在我的pad上 返回的实际尺寸是 1024768 但是在客户的pad上面是 750350
因为屏幕问题 物理像素px差别比较大 然后就研究开始重新适配

/*每个页面公共css */
    @function tovmin($rpx) {
        @return #{ ($rpx) *0.13020833333333334}vmin
    }
    
    
    @function tovmax($rpx) {
        //$rpx为需要转换的字号
        @return #{ ($rpx) *0.09765625}vmax
    }

结果：vmax/vmin 作为布局单位 因为我用的是scss 所以写了个函数 tovmax 是宽 tovmin是高
例如 设计稿尺寸基于是1024*768

1. 假设设计稿的里面有个图片尺寸是 400*300
2. 1px / 1024 *100 得出1px在设计稿中的百分比是0.09765625
3. 1px / 768 * 100 得出1px在设计稿中的百分比是 0.13020833333333334
4. 图片转换后的宽的是 (400* 0.09765625)vmax
5. 图片转换后的高的是 (300* 0.13020833333333334)vmin
6. 根据 4、5 得出上面的通用的公式
   ps: 如果是字体的话 就统一用 tovmax ；如果是正方形 宽高也用 vmax
   ok 以上就是适配小程序pad端 不同尺寸的解决方案 如果类似的需求可以做一个参考 如果有更好的解决方案欢迎来探讨....