手机端开发系列之一-基础的概念解析

Contents

1. 手机端开发基础

手机端开发基础

对于手机端的开发首先来理解一些概念上的一些东西。

这就是一个故事。
code block:

1.屏幕

移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。通常我们所指的屏幕尺，实际上指的是屏幕对角线的长度。

而分辨率则一般用像素来度量，表示屏幕水平和垂直方向的像素数，例如1920*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成。

2.像素

物理像素指的是屏幕渲染图像的最小单位，不可人为进行改变，其值大小决定了屏幕渲染图像的品质，我们以上所讨论的都指的是物理像素。

// 获取屏幕的物理像素尺寸
window.screen.width;
window.screen.height;
// 部分移动设备下获取会有错误

CSS像素指的是通过CSS进行网页布局时用到的单位，其默认值(PC端)是和物理像素保持一致的（1个单位的CSS像素等于1个单位的物理像素），但是我们可通缩放来改变其大小。

浏览器窗口尺寸是CSS像素来度量的，部分浏览器存在兼容问题（IE低版本无此属性），但是可以忽略这些细节。

// 获取浏览器窗口尺寸
window.innerWidth;
window.innerHeight;
// 此值大小包含滚动条的大小

我们需要理解的是物理像素和CSS像素的一个关系，1个物理像素并不总是等于一个CSS像素通过调整浏览器缩放比例，所以存在3种情况。

3.长度单位

在Web开发中可以使用px（像素）、em、pt（点）、in（英寸）、cm（厘米）做为长度单位，我们最常用px（像素）做为长度单位。
我们可以将上述的几种长度单位划分成相对长度单位和绝对长度单位。

iPhone3G/S和iPhone4/S的屏幕尺寸都为3.5英寸（in）但是屏幕分辨率却分别为480320px、960480px，
由此我们可以得出英寸是一个绝对长度单位，而像素是一个相对长度单位（像素并没有固定的长度)。

4.像素的密度

DPI（Dots Per Inch）是印刷行业中用来表示打印机每英寸可以喷的墨汁点数，计算机显示设备从打印机中借鉴了DPI的概念。

由于计算机显示设备中的最小单位不是墨汁点而是像素，所以用PPI（Pixels Per Inch）值来表示屏幕每英寸的像素数量，我们将PPI、DPI都称为像素密度，但PPI应用更广泛，DPI在Android设备比较常见。
利用勾股定理我们可以计算得出PPI：如IPHONE 4 (960^2+640^2)/3.5所以屏幕尺寸固定的话 PPI的值越大画面就更好，更清晰。

5.独立像素

随着技术发展，设备不断更新，出现了不同PPI的屏幕共存的状态（iPhone3G/S为163，iPhone4/S为326），这时像素不再是统一的度量单位，会造成同样尺寸的图像在不同PPI设备上的显示大小不一样。

做为用户是不会关心这些细节的，他们只是希望在不同PPI的设备上看到的图像内容差不多大小，所以这时我们需要一个新的单位，这个新的单位能够保证图像内容在不同的PPI设备看上去大小应该差不多，这就是独立像素，IOS设备上叫PT(Point)，Android设备上叫DIP(Device independent Pixel)或DP。

举例说明就是iPhone 3G（PPI为163）1dp = 1px，iPhone 4（PPI为326）1dp = 2px。

这个对应（比例）关系是操作系统确定并处理，通过window.devicePixelRatio可以获得该比例值。

6.二倍图

这个是开发的时候，为了解决在不同的设备上，因为像素的不同，小图在（iPhone3上用的图）高的PPI（在iPhone上用）是会被拉伸，就变得模糊，所以就要用一个大的图来

chenzq FE

try to be a better man!