- 当前 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
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
}
})