H5 移动端高清、多屏适配方案.docVIP

背景 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像素)，然后由相关系统