移动开发： 基础概念

移动开发

基础概念

• 屏幕尺寸、分辨率、像素密度？
• CSS像素、设备像素、设备独立像素、设备像素比？

屏幕尺寸、分辨率、像素密度？

1. 屏幕尺寸: 对角线长度来衡量，以英寸（寸in）单位。1英寸=2.54cm。

2. 分辨率(Screen resolution): 指显示器能显示的像素数，即所有经纬线交叉点的数目。以像素数(点)来计量，如640*480=307200像素。
   分辨率不仅与与显示尺寸有关，还受显像管点距、视频带宽等影响，其中，和刷新频率的关系比较密切.

3. 像素密度(PPI: Pixels Per Inch): 每英寸屏幕所拥有的像素数。像素密度越大（同样的分辨率，屏幕的尺寸越小），显示画面细节越丰富。
   ppi≥300的叫超高密度屏幕，苹果给它换了个高大上的名称：Retina视网膜屏幕。
   屏幕的清晰度是由分辨率和屏幕尺寸 共同决定，用像素密度衡量更加准确。

CSS像素、设备像素、设备独立像素、设备像素比？

1. CSS像素: 独立于设备的, 用于逻辑上衡量像素的单位。
2. 设备像素（device pixel）：设备能控制显示的最小物理单位，显示器上一个个的点。大小固定，不可变。
3. 设备独立/无关像素（dip/dp：device-independent pixel）：计算机坐标系统中的一个点，该点代表一个可由程序使用并控制的虚拟像素，然后由相关系统转换为物理像素。
4. 设备像素比（DPR：devicePixelRatio）：是设备上设备像素和设备独立像素的比例。

1. 分辨率, layout viewport, visual viewport
2. window.innerWidth, screen.width

3.

如何计算

像素密度 PPI = $\frac{分辨率宽度^2+分辨率高度^2}{屏幕尺寸}$

设备像素比DPR = 设备像素/ 设备独立像素

screen.width/height：设备独立像素/屏宽，放缩不变；【 测试JS：document.write(“Total Width: ” + window.innerWidth);】

window.innerWidth：视觉区域宽度visual viewport；device-width值（ideal viewport，多为360）可用window.innerWidth来获取。

document.documentElement.clientWidth：layout viewport；

window.devicePixcelRatio：设备像素比DPR。