收藏
回答

wx.getSystemInfo计算屏幕宽度不对

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug wx.getSystemInfo计算屏幕宽度不对 客户端 6.6.7 2.0.0

- 当前 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 个回答

  • 2018-11-14

    https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html


    人家定好的,你理解错了啊

    2018-11-14
    有用
    回复
  • 客隐梧桐
    客隐梧桐
    2018-08-31

    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

    }

    })



    2018-08-31
    有用
    回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-08-27

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

    2018-08-27
    有用
    回复
登录 后发表内容