本文主要是介绍小程序/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.windowHeight,fixRate: 750 / res.windowWidth})this.setData({liHuiHeight: Math.min(Math.max(res.windowHeight * 750 / res.windowWidth - 550, 300),1000)})},})2、给图片赋值
小程序中，重点要设置mode为heightFix(高度不变，宽度自动变化，保持原图宽高比不变)
<image mode="heightFix"style="height:{{liHuiHeight}}rpx" src=""class="lihui-item"></image>如果页面中，还有其他元素需要适配，比如有个按钮，需要一直在页面中上方，采用fixed定位做的，那么也可以通过此法设置他的值
这篇关于小程序/H5固定单页面展示（长短屏自适应，不出现滚动条）的适配方案的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
