微信小程序getSystemInfo的屏幕宽度不一致问题

微信小程序getSystemInfo的屏幕宽度不一致问题

 在开发微信小程序时，有时候需要获取设备的一些信息，微信基础库提供了wx.getSystemInfo()方法提供给开发者使用。但是在前端进行机型适配时，获取的屏幕宽度(screenWidth)和屏幕高度(screenHeight)与手机实际的分辨率不一致。
 比如我的手机分辨率为2340*1080，也就是所谓的2K分辨率。然后调用getSystemInfo()方法获取的屏幕宽度为360，高度为780，单位是px。这是怎么回事呢？
 这里就需要了解以下几个概念了。

逻辑分辨率(Point,pt): 页面上抽象的像素点的多少，与设备屏幕尺寸有关
物理分辨率(Pixel,px):影像显示的基本单位，与屏幕尺寸无关
像素密度(ppi):表示每英寸所拥有的像素数量。1 inch=2.54 cm
像素比(Device Pixel Ratio,dpr): dpr = 物理像素 / 逻辑像素

 上面的逻辑分辨率又叫逻辑像素，物理分辨率又叫物理像素。而getSystemInfo()获取的屏幕宽度为逻辑像素大小，而手机设置里的系统信息中显示的是物理像素。拿我的手机举个例子：

手机屏幕尺寸：6.26英寸
物理分辨率：2340*1080
逻辑分辨率：780*360
计算得出：
dpr= 2340/780=3 或者 1080/360=3

$ppi=\frac{\sqrt{widt{h}^2+heigh{t}^2}}{屏幕尺寸}$
代入公式：
$ppi=\frac{\sqrt{1080^2+2340^2}}{6.26}=411$ 单位是pixcel/inch
在实际应用时，虽然不可以直接获取到物理像素，但是可以通过计算间接得出。先调用getSystemInfo()方法可以获取逻辑像素和像素比，进而可以计算出物理像素。代码如下：

wx.getSystemInfo({
  success (res) {
  let pr = res.pixelRatio   //获取像素比
  let width_px = res.screenWidth * pr  //计算物理分辨率宽度
  let height_px = res.screenHeight * pr //计算物理分辨率高度
  }
})

这里再补充一点，手机购买信息里面的6.26英寸，指的是屏幕对角线的长度。怎么知道手机的长和宽各是多少呢。根据前面计算出来的ppi就可以知道了
手机宽度

phone_width = 物理分辨率/ppi = 1080/411 = 2.63 inch
phone_height = 物理分辨率/ppi = 2340/411 = 5.69 inch

高是宽的2倍还多，感觉手机太长了。