移动前端适配—逻辑像素和物理像素

基础概念
dpi
每英寸所含有的像素点的个数。

物理像素

移动设备出厂时，就具有的分辨率，小米5 1920x1080 iphone6 1334x750

逻辑像素

Give your page a <meta name="viewport" content="width=device-width">, read out document.documentElement.clientWidth, and most browsers will give you the width of the layout viewport, which now equals the dips width.

当你在html设置了<meta name="viewport" content="width=device-width">，那么页面就会以移动设备的dpis width做为逻辑像素。

dpis width & scale
dpis width 如何得出？

你先须要计算dpi
小米5为例， sqrt(19202 x 10802) / 5.15(屏幕的物理尺寸) = 427.7
计算scale
scale = 427.7 / 160 约等于 3.(这个计算是针对于android手机，不过ios也相似，至少目前的机型都符合这个计算，有清楚的大佬能够告知)
android 以160的倍数做为分隔点，来划分不一样手机逻辑像素的缩放比例。
160 mdpi
320 hdpi

480 xhdpi

计算dpis width 也就是 逻辑像素
dpis width = 1080 / 3 = 360
那么结论来了
开发时其实只须要考虑逻辑像素，android 中 dp单位和移动前端中的px是同样的，ios中用的也是逻辑像素。

那么开发时，图片咱们改如何选择呢？
1280 x 720 、1920 x 1080 、2560 x 1440,这物理分辨率不一样的手机之间有什么区别？

仍是以小米5为例，逻辑像素是360，那么其实对于小米5来讲360px(物理像素)的图片就能够正常显示，而且不会拉伸，那么为了让图片的色彩更加好，可使用720px(物理像素)的图片或者是1080px(物理像素)的图片。

可是360的逻辑像素只是小米5的，不一样手机之间存在差别性，为了让全部手机上面的图片较为正常的显示，那么应该选取一个物理像素较高的图片。

android端一般在本地准备了多套的图，根据不一样scale来选择不一样的图片，以便在全部手机上都能较好的显示，同时保证了性能与展现效果，固然你能够选择仅仅使用一张最大的图，但代价即是内存占用和性能问题。

移动web端更是如此，由于移动web端的图片一般是从服务器获取，那么若是都统一使用最大的图片，势必会影响加载速度,因此根据实际使用状况，本身斟酌。

举个栗子

以iphone6来讲,

物理像素分辨率: 750 * 1334
设备独立像素分辨率也就是逻辑像素分辨率 : 375 * 667
设备像素比: 2

无论是高清屏幕仍是普通屏幕,一个1*1 css像素那么大的物理尺寸是同样的,区别在于高清屏上一个一个1*1 css像素那么大的地方,对应2*2个物理像素,因此很清晰。

在普通屏幕下1个css像素(1*1)对应1个物理像素(1*1)

在高清屏幕下1个css像素(1*1)对应4个物理像素(2*2)

不知道看完这个例子,你是否能理解这些叫法的区别。

补充说明:

物理像素(physical pixel): 物理像素越大,屏幕越清晰。
设备独立像素(density-independent pixel) : 也叫密度无关像素。这个设备独立像素,就是你眼睛看到的手机大小有关。
2个手机看上去同样大? 那他们设备独立独立像素就是同样的。也就是说我无论你高清屏仍是什么**屏设备独立像素只跟我这个设备看上去大不大有关。

设备看上去很大? 那设备独立像素就大 ; 设备看上去很小? 那设备独立像素就小

因此我以为设备独立像素(density-independent pixel)。这个翻译比较贴切也好理解。只跟设备看上去的大小相关。

不少翻译也管设备独立像素叫作: 逻辑像素 、