小程序/H5固定单页面展示（长短屏自适应，不出现滚动条）的适配方案

场景描述：

在开发小程序、H5中，可能存在需要在各种长短屏下都一个页面展示内容，不出现滚动条的场景。

我们知道宽度的话按照设计稿750计算，大家基本没啥问题，H5就是750rem，小程序用750rpx，对吧，什么屏幕都能适配全屏。但是高度怎么办呢？

 

方案介绍：

此种方案中，必须有些可缩放元素存在：一张图片；其他部分如：底部按钮、底部文字、底部介绍等元素不能缩放。

此时可以利用750/windowWidth计算一个比率。

然后对于适配图片的处理方式是，1、计算设计稿中，不可缩放元素的高度；2、用屏幕高度减去不可缩放元素高度；3、对于可缩放适配的图片将其高度设置成1、2计算后的值乘以缩放比率，然后在保持宽高比的情况下，缩放图片宽度；如此便可适配

具体执行如下：

1、计算适配图片高度

其中550是页面中不可缩放元素的高度，所白了就是需要预留多高才能显示这些必须显示的玩意。

那么适配图片的高度就是屏幕剩余空间的高度，说白了还剩多少都给他。（但是如果很极端，屏幕不正常的小也不能让适配图片一点也看不到，或者屏幕不正常的长也不能让适配图片无限变大，那就需要给到最大最小值了）

    wx.getSystemInfo({
      success: (res) => {
        console.log(res);
        this.setData({
          windowW: res.windowWidth,
          windowH: res.wind