小程序适配屏幕的高度

1.使用全局变量globalData保存windowHeight

app.js文件

//app.js
App({
     
  onLaunch: function () {
     
    //获取屏幕高度
    wx.getSystemInfo({
     
      success: (result) => {
     
        this.globalData.windowHeight  = result.windowHeight ;
      },
    })
  },
  globalData: {
     
    windowHeight :null
  }
})

home.js文件

// pages/home/home.js
var app = getApp();
Page({
     
  /**
   * 页面的初始数据
   */
  data: {
     
    windowHeight:app.globalData.windowHeight
  }
})

2.将获取到的高度windowHeight赋值给元素

home.wxml

<!--pages/home/home.wxml-->
<view class="main" style="height:{
     {windowHeight}}px"> 
</view>

home.wxss

/* pages/home/home.wxss */
.main{
     
  text-align: center;
  font-size:2rem;
  background: pink;
  width: 750rpx;
}

此时，可用背景颜色填充大部分机型。
备注：XR等设备与安全区域相关需要单独设置。