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

比眉伴天荒 2022-11-07 11:34 164阅读 0赞

# 场景描述： #

在开发小程序、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.windowHeight,
              fixRate: 750 / res.windowWidth
            })
            this.setData({
              liHuiHeight: Math.min(Math.max(res.windowHeight * 750 / res.windowWidth - 550, 300),1000)
            })
          },
        })

2、给图片赋值

小程序中，重点要设置mode为heightFix(高度不变，宽度自动变化，保持原图宽高比不变)

如果页面中，还有其他元素需要适配，比如有个按钮，需要一直在页面中上方，采用fixed定位做的，那么也可以通过此法设置他的值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70]: /images/20221023/95e4495b7f5b4057a5e20d646a07268e.png