微信小程序如何获取页面全屏宽高

简介: 微信小程序如何获取页面全屏宽高
wx.getSystemInfo({
  success: function(res) {
    const screenWidth = res.screenWidth; // 屏幕宽度
    const screenHeight = res.screenHeight; // 屏幕高度
    wx.createSelectorQuery().selectViewport().boundingClientRect(function(rect) {
      const viewportWidth = rect.width; // 视口宽度
      const viewportHeight = rect.height; // 视口高度
      const fullScreenWidth = screenWidth * viewportWidth / rect.width; // 页面全屏宽度
      const fullScreenHeight = screenHeight * viewportHeight / rect.height; // 页面全屏高度
      console.log('页面全屏宽度:', fullScreenWidth);
      console.log('页面全屏高度:', fullScreenHeight);
    }).exec();
  },
  fail: function(error) {
    console.log('获取系统信息失败', error);
  }
});
相关文章
|
1月前
|
移动开发 小程序
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
|
1月前
|
缓存 小程序 UED
微信小程序如何在切换页面后原页面状态不变
微信小程序如何在切换页面后原页面状态不变
33 0
|
1月前
|
小程序 UED 开发者
小程序如何监听页面的滚动事件
小程序如何监听页面的滚动事件
25 0
|
2月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
|
2天前
|
小程序
小程序和页面生命周期详解
小程序和页面生命周期详解
11 0
|
20天前
|
小程序
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
51 0
|
1月前
|
存储 缓存 小程序
微信小程序页面传值的几种方式
微信小程序页面传值的几种方式
|
1月前
|
小程序
小程序页面路由传参的方法?
小程序页面路由传参的方法?
17 0
|
1月前
|
缓存 小程序 开发者
微信小程序如何刷新当前页面
微信小程序如何刷新当前页面
25 0
|
2月前
|
存储 JSON 小程序
【微信小程序】-- 页面处理总结(三十一)
【微信小程序】-- 页面处理总结(三十一)

热门文章

最新文章