移动设备分辨率问题

前言：上一篇文章讲解了像素的一些基本概念，如果你需要完全弄明白还是需要一点时间去理解。尤其当你不断深入去了解时，才会发现像素比我们想象中的要复杂，因为像素不仅涉及到软件技术，还有硬件技术。

苹果分辨率图片.png

实战

这里我们以现在最为火爆的小程序来演示。

假设现在在IPhone6（750*1334）上面开发了一个小程序，设计师给了你一套宽度为750px的图片，现在将图片设置进入程序中，如果在程序中宽度你设置成750px，你会发现图片只显示了一半。为什么只显示一半？那么宽度应该设置成多少？

应该设置成 375px，width设置的 px简单的理解就是对应设备的显示屏宽度，如果设置成750，实际还有一半在屏幕的外面，就像被拉长，自己脑补一下，750 * 1334是 iPhone的逻辑分辨率，上一讲我们已经说明了在知道设备的逻辑分辨率、屏幕尺寸（iPhone6是4.7 inch）和设备的 PPI(iPhone6的PPI=326 )是可以求出对应的设备屏幕的宽高 375 * 667（指实际长度）。具体当然不用你自己去求，在第一张图中已经给出，分辨率（pt）和分辨率（px）的关系，Reader @2x ，意思就是说一个物理像素点可以包含两个逻辑像素点。这就是iPhone6 物理分辨率和逻辑分辨率对应的关系。

demo1.png

现在将宽度修改过来了，设置成375px，问题解决，那么为什么设计师给出的是750的像素宽，而不是直接给你375px？

上面理解的时候，很容易将图片的像素带入进去，然后一切都乱七八糟了。那么我们将图片换成375 * 667的可以吗？当然可以，只是显示的效果没有 750 * 1334的好，这里重点是width的宽度你不能设置错。当你把宽度设置成 750px时，简单的理解就是图片被拉长了一倍，然后屏幕只能显示 375的宽度，另外一半显示不了。

demo2.png

现在假如我们换成iPhone6 plus（828*1472），或者其它分辨率不同的手机，显示出现白边怎么办？

*这就是移动设备分辨率适配问题了，苹果设备还行，Android设备就麻烦多了，当然Android设备的同时也提出了很多新的适配方案这里就不介绍了，我们依然以苹果微信小程序的适配的解决方案为例，在微信小程序中引入了rpx这个单位，在Android用的是dp，在ccs中用的rem，在苹果中用的pt这个单位，苹果是以iPhone6 *

rpx的作用是什么?

这个单位是小程序为不同分辨率的适配指定的一个单位，当然制定这个单位就一定会有一个参照，在苹果中，rpx就是以iPhone6 的标准进行制作的，也就是1rpx=1px=0.5pt，现在使用rpx作为单位，在不同的分辨率底下小程序会自动进行转换，而使用px则不会。现在将同样的程序部署在iPhone6 plus中那么1px=0.6rpx，Android设备中dp、苹果的pt、css中的rem都是同样的道理。