微信小程序根据wx.getSystemInfo获取屏幕尺寸，并动态改变元素宽高尺寸，示例

我会带着你远行 2023-07-24 02:57 17阅读 0赞

# 通过js获取屏幕尺寸，并改变元素尺寸 #

### 效果图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29uZTMxMg_size_16_color_FFFFFF_t_70]

### index.wxml ###

<view class="body-view" style="width:{ { wWidth}}rpx; height:{ { wHeight}}rpx;">
      <view class="top-view" style="width:{ { topWidth}}rpx; height:{ { topHeight}}rpx;">
        <view class="welcome_title">欢迎使用XXX小程序</view>
      </view>
      <view class="middle-view" style="width:{ { middleWidth}}rpx; height:{ { middleHeight}}rpx;">
        <view class="welcome_text">正在开发，欢迎来访。。。</view>
      </view>
      <view class="bottom-view" style="width:{ { bottomWidth}}rpx; height:{ { bottomHeight}}rpx;">
        <button type="primary" class="shouquan_btn" bindtap="shouquan">授权使用</button>
      </view>
    </view>

### index.js ###

Page({ 
      data:{ 
        openid:"",
        wHeight:null,
        wWidth:null,
        topHeight:null,
        topWidth:null,
        middleHeight:null,
        middleWidth:null,
        bottomHeight:null,
        bottomWidth:null,
      },
      //页面显示事件
      onShow(){ 
        this.get_window_size();
      },
      //获取窗口尺寸
      get_window_size(){ 
        let that = this;
        // 获取系统信息
        wx.getSystemInfo({ 
          success: function (res) { 
            // 获取可使用窗口宽度
            let clientHeight = res.windowHeight;
            // 获取可使用窗口高度
            let clientWidth = res.windowWidth;
            // 算出比例
            let ratio = 750 / clientWidth;
            // 算出高度(单位rpx)
            let height = clientHeight * ratio;
            // 设置高度
            that.setData({ wHeight: height});
            that.setData({ wWidth: 750});
    
            that.setData({ topHeight: height*0.15});
            that.setData({ topWidth: 750});
    
            that.setData({ middleHeight: height*0.7});
            that.setData({ middleWidth: 750});
    
            that.setData({ bottomHeight: height*0.15});
            that.setData({ bottomWidth: 750});
          }
        });
      }
    })

### index.css ###

.body-view{  float: left; }
    .top-view{ float:left;}
    .middle-view{  float:left; }
    .bottom-view{  float: left; text-align: center; }
    
    .top-view .welcome_title{  float:left; width:100vw; height: 15vw; text-align: center; font-size: 1.5rem;line-height: 15vw;}
    .middle-view .welcome_text{  margin-left: 5vw; width:90vw; text-align: left; font-size: 1.0rem; line-height: 10vw;}
    .bottom-view .shouquan_btn {  margin:auto; }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L29uZTMxMg_size_16_color_FFFFFF_t_70]: /images/20230528/9dd4a1ddcaa94103969cd753bbd739b9.png