微信小程序判断手机机型信息及dpr

微信小程序判断手机机型信息及dpr=2、3

出现这个原因是因为手机dpr不同，导致在显示二维码时出现位置偏移。首先能想到的就是获取设备信息，根据不同机型而解决问题。

1.wxml 开控制位置间距variable

<view class="moreSwiperDad" style="left:{{variable}};">
  <swiper class="moreSwiper" bindchange='testDetails' current="{{current}}" indicator-dots="ture" circular="{{false}}" >
    <block wx:for="{{canvasList}}" wx:key="index" wx:for-item="item">
      <view class="" style="overflow: hidden;" >
        <swiper-item class="moreSwiper-son {{indexS}}">
          <view class="code_wid_hei">
            <canvas class='code' canvas-id='myqrcode{{index+1}}'></canvas>
            <view class='code' wx:if="{{!showQrCode}}">132131</view>
            <view class="" style="height:60rpx;width:100%;"></view>
            <text class='codeNum'>出示二维码，轻松签到\n凭证号：{{item.codeData}}</text>
          </view>
        </swiper-item>
      </view>
    </block>
  </swiper>
</view>

2.js

var that = this;
const res = wx.getSystemInfoSync()
//判断是否为iphonex
console.log(res) //打印出手机机型所有信息
if(res.pixelRatio === 2){ //dpr=2  model
  console.log('dpr=2')
  that.setData({
    variable: that.data.variable,
  });
}else if(res.pixelRatio === 3){//dpr=3 比如iphone X之类的
  console.log('dpr=3')
  that.setData({
    variable: "30.6%",
  });
}
if(res.model == 'iPhone XR' || res.model == 'iPhone XR<iPhone11,8>'){
  that.setData({
    variable: "30.6%",
  });
}

一、下面看有问题的

二、解决之后