移动开发基础知识

## 前言
移动设备越来越普及啦，所以我们不能只停留在开发PC端页面，和一包一起来学学移动端Web开发吧~
### 移动开发特点
- 移动端开发对象主要是手持设备，大致为ios和android系统
- 由于具备HTML5特性也叫H5页面
- 基于webkit开发，不必考虑浏览器兼容性（再见IE；））
- 由于移动端屏幕尺寸五花八门，因此有更高的适配要求
- 高性能要求
## 基本概念
### 视窗 viewport
- **通俗理解，viewport即浏览器的窗口，即移动设备屏幕上能用来显示我们的网页的那一块区域。** 一般来讲，由于移动设备分辨率比桌面浏览器较小，为了能在移动设备上正常显示传统为PC设计的网站，移动设备上的viewport都是要大于浏览器可视区域的，但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。 

- PPK大神把viewport分为三种：layout viewport，visual viewport， ideal viewport[（ 请参考ppk系列文章）](https://www.quirksmode.org/mobile/viewports.html)
 ### 屏幕尺寸
- 指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。
### 屏幕分辨率
- 指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，如1960 * 1080。（这里的1像素值得是物理设备的1个像素点）


像上面这张图，把他看成是一个手机屏幕，假设他横向有1000个格子也就是像素点，纵向有500个格子，那么他的分辨率就是1000*500
### 屏幕像素密度
- 屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。如iPhone 3GS和iPhone 4的区别。屏幕尺寸一样，屏幕分辨率相差一倍，屏幕像素密度也相差一倍。如图：


- PPI的值越高，画质越好，也就是越细腻。
- PPI的公式


用这个公式我们可以计算PPI，如下图：（横向和纵向就是我们刚刚说分辨率为1000*500的1000和500）


计算结果与圈红相近

### 设备独立像素(density-independent pixel)
- 设备独立像素也称为密度无关像素,**又叫dip或者是dp**，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素。
- 它可以用来**辅助区分高清屏幕和非高清屏幕**。([可以看看张鑫旭的文章](http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/))

### 两个像素
#### 物理像素(physical pixel)
- 物理像素又被称为设备像素。在同一个设备上，它的物理像素是固定的，这是厂商在出厂时就设置好了的，即一个设备的分辨率是固定的。
- 设备能控制显示的最小单位，我们可以把这些像素看作成显示器上一个个的点。

#### CSS像素
- CSS像素是没有实际大小的抽象单位，它是一个相对长度，它相对的是电脑或手机显示器的分辨率。
- 一般情况之下，**CSS像素称为与设备独立像素**(device-independent pixel)，简称DIPs

### css中的1px并不等于设备的1px
- 在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。
- css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。
- PC可以忽略，但是移动端不可以。比如在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。
- 还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。
  
如图，有四个一像素，**缩放比例为100%**,此时，物理像素等于css像素，即重叠：


如图，当我们**缩小浏览器**时，CSS像素开始收缩，导致1单位的设备像素上重叠了多个CSS像素


如图，当我们放大浏览器时，CSS像素开始扩大，导致1单位CSS像素上重叠了多个设备像素

 
### 设备像素比(device pixel ratio)
- 设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。即

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

- css中的px可以看成是设备独立像素，当dpr为1:1时，使用1个物理像素显示1个CSS像素。当dpr为2:1时，使用4(2*2)个物理像素显示1个CSS像素，当这个比率为3:1时，使用9个设备像素显示1个CSS像素。

- 设备像素比在不同的浏览器中还存在些许的兼容性问题。如图：


---

综合上述概念，我们看一张图：


众所周知，iPhone6的设备宽度和高度为375pt * 667pt,可以理解为设备的独立像素；而其dpr为2，根据上面公式，我们可以很轻松得知其物理像素为750pt * 1334pt

在不同的屏幕上，CSS像素所呈现的物理尺寸是一致的，而不同的是CSS像素所对应的物理像素具数是不一致的。在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。

---

看到这里，可能有的同学觉得什么屏幕分辨率，屏幕尺寸，ppi很多专业名词很乱，我们这里总结一下
## 一些名词的整理
### ppi，dpi，dp，dip
- **ppi**：pixels per inch，屏幕像素密度
- **dpi**：dots per inch，ppi和dpi是同一个概念，Android比较喜欢使用dpi，IOS比较喜欢使用ppi。
- **dp**、**dip**：dp和dip都是Density Independent Pixels的缩写，设备独立像素。**CSS像素 =设备独立像素 = 逻辑像素**

## 参考文章
>[移动前端开发之viewport的深入理解](https://www.cnblogs.com/2050/p/3877280.html#!comments)

>[深入了解viewport和px](http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml)

>[使用Flexible实现手淘H5页面的终端适配](https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html)

>[viewports剖析](https://www.w3cplus.com/css/viewports.html)

>[设备像素，设备独立像素，CSS像素](http://yunkus.com/physical-pixel-device-independent-pixels/)

(整理到想哭哈哈哈)