- 当前 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
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.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
}
})
麻烦给个相关的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html），我们定位下问题