H5-手机端高清、多屏适配方案

1.开发手机端H5页面

2.面对不同分辨率的手机

3.面对不同屏幕尺寸的手机

视觉稿

在前台开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。

对于手机端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：

首先，选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480，现在更多的是iphone6的375×667)。

对于retina屏幕(如: dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素点个数是原来的4倍（对iphone6而言：原价的375×667，就会变成750×1334）。

问题：

对于dpr=2的手机，为什么画布大小×2，即可以处理高清问题？

对于2倍大小的视觉稿，在具体的css编码中如何复原每一个区块的真实宽高(也就是布局问题)?

带着问题，往下看…

少量概念

在进行具体的分析之前，首先得知道下面这些关键性基本概念(术语)。

物理像素(physical pixel)

一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设施像素都有自己的颜色值和亮度值。

设施独立像素(density-independent pixel)

设施独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比方: css像素)，而后由相关系统转换为物理像素。

所以说，物理像素和设施独立像素之间存在着肯定的对应关系，这就是接下来要说的设施像素比。

设施像素比(device pixel ratio )

设施像素比(简称dpr)定义了物理像素和设施独立像素的对应关系，它的值可以按如下的公式的得到：

设施像素比 = 物理像素 / 设施独立像素 // 在某一方向上，x方向或者者y方向

在javascript中，可以通过window.devicePixelRatio获取到当前设施的dpr。

在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设施，做少量样式适配(这里只针对webkit内核的浏览器和webview)。

综合上面几个概念，一起举例说明下：

以iphone6为例：

设施宽高为375×667，可以了解为设施独立像素(或者css像素)。

dpr为2，根据上面的计算公式，其物理像素就应该×2，为750×1334。

用一张图来体现，就是这样(原谅我的盗图)：