wx.getSystemInfo计算屏幕宽度不对
发布于 2 年前 作者 qiaojing 10242 次浏览 来自 问答
  • 当前 Bug 的表现(可附上截图)

wx.getSystemInfo({

success: function (res) {

data.screenWidth = res.screenWidth

data.screenHeight = res.screenHeight

data.wx_windowWidth = res.windowWidth

data.wx_windowHeight = res.windowHeight

data.pixelRatio = res.pixelRatio

data.brand = res.brand

data.model = res.model

}

})

  • 预期表现

pc模拟器计算屏幕宽度=wx_windowWidth*pixelRatio=375*2=750 rpx。整个屏幕宽。

同样方法在小米5s真机上计算屏幕宽度=wx_windowWidth*pixelRatio=392*2.75=1078 rpx, 1078 rpx这个值设置wmxl宽度就超出屏幕宽度太多,实际用750rpx就是真机整个屏幕宽(不管是真机 还是 pc模拟器 都是)。原因不详。

  • 复现路径
  • 提供一个最简复现 Demo
3 回复

麻烦给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),我们定位下问题

wechatide://minicode/50xTW4mE7N2p

挺搞笑的,我自己上传的bug报告代码段,自己打开这个链接,wxml里面全是问号。上传几次都这样,居然又发现一个新bug

----------------------------------------------------------你可能也打不开 代码段,我自己把代码复制给你,就几行

wxml:

<view>模拟器正确,真机上错误的,宽度:{{dOneImageWidth}}rpx</view>

<view class=‘oneimageview’ style=“width:{{dOneImageWidth}}rpx;height:400rpx;”>

<image src=http://www.qszb.xyz/uploads/20180818/7a7d68451d4eb7b1bc1ece9cae02dfea.png mode=‘scaleToFill’></image>

</view>

<view>真机,pc模拟器上都是 正确的,宽度写死:750rpx</view>

<view class=‘oneimageview’ style=“width:750rpx;height:400rpx;”>

<image src=http://www.qszb.xyz/uploads/20180818/7a7d68451d4eb7b1bc1ece9cae02dfea.png mode=‘scaleToFill’></image>

</view>

wxss:

.oneimageview {

display: flex;

flex-direction: column;

justify-content: center;

border-color:red;

padding: 10rpx 10rpx 10rpx 10rpx;  

}

.oneimageview image {

height: 100%;

width: 100%;  

border-width: 3rpx;

border-style: solid;

border-color: #ccc;

}

js:

const app = getApp()

Page({

data: {

dOneImageWidth:0

},

onLoad: function () {

},

onShow:function(){

var dOneImageWidth;

dOneImageWidth = this.getWindowSize().wx_windowWidth * this.getWindowSize().pixelRatio;

console.log(this.getWindowSize().wx_windowWidth)

console.log(this.getWindowSize().pixelRatio)

console.log(this.data.dOneImageWidth)

this.setData({dOneImageWidth: dOneImageWidth})

},

getWindowSize: function () {

var data = {

screenWidth: 0,    //手机屏幕宽度  px     rpx要乘以 pixelRatio 设备像素比

screenHeight: 0,   //手机屏幕高度  px     rpx要乘以pixelRatio  设备像素比

wx_windowWidth: 0,   // 小程序可使用窗口宽度     全屏下=手机屏幕宽度

wx_windowHeight: 0,  // 小程序可使用窗口高度     手机屏幕高度 - 小程序顶部的的微信状态栏

pixelRatio: 2,      //设备像素比

brand: ‘’,

model: ‘’

}

wx.getSystemInfo({

success: function (res) {

data.screenWidth = res.screenWidth

data.screenHeight = res.screenHeight

data.wx_windowWidth = res.windowWidth

data.wx_windowHeight = res.windowHeight

data.pixelRatio = res.pixelRatio

data.brand = res.brand

data.model = res.model

}

})

return data

}

})

回到顶部