小程序适配手机,覆盖全部屏幕

📅 2026/7/28 20:21:12
小程序适配手机,覆盖全部屏幕
做微信小程序开发时会出现这样的问题不同的手机高度不一样当把高度固定之后在高度大于设置的固定的手机上就会出现底部空白的情况如图一为了解决这个问题我们可以获取手机的高度和宽度再将获取的高度设为背景高度。图一问题小程序高度设为固定不同手机底部会出现留白情况解决办法获取手机的宽高将背景颜色的高度设为获取到的手机高度具体代码index.wxml其中style‘height:{{scroll_height}}rpx;’ 是获取手机的高度view classcontainer styleheight:{{scroll_height}}rpx; 背景颜色覆盖整个屏幕,避免底部留白 /viewindex.js//index.js Page({ onLoad: function () { //获取屏幕的宽高避免底部出现空白 let windowHeight wx.getSystemInfoSync().windowHeight // 屏幕的高度 let windowWidth wx.getSystemInfoSync().windowWidth // 屏幕的宽度 this.setData({ scroll_height: windowHeight * 750 / windowWidth }) } })index.wxss/* index.wxss */ .container{ margin: 0px; padding: 0px; color: white; font-size: 35rpx; background: #8abcd1; }这样就能覆盖整个手机屏幕了如下