【移动端web开发】（一）基本概念

前言

移动设备越来越普及啦，所以我们不能只停留在开发PC端页面，和一包一起来学学移动端Web开发吧~

移动开发特点

• 移动端开发对象主要是手持设备，大致为ios和android系统
• 由于具备HTML5特性也叫H5页面
• 基于webkit开发，不必考虑浏览器兼容性（再见IE；））
• 由于移动端屏幕尺寸五花八门，因此有更高的适配要求
• 高性能要求

基本概念

视窗 viewport

• 通俗理解，viewport即浏览器的窗口，即移动设备屏幕上能用来显示我们的网页的那一块区域。 一般来讲，由于移动设备分辨率比桌面浏览器较小，为了能在移动设备上正常显示传统为PC设计的网站，移动设备上的viewport都是要大于浏览器可视区域的，但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。

一些设备上浏览器的默认viewport的宽度

• PPK大神把viewport分为三种：layout viewport，visual viewport， ideal viewport（ 请参考ppk系列文章）

屏幕尺寸

• 指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。

  
  
  image

屏幕分辨率

• 指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，如1960 * 1080。（这里的1像素值得是物理设备的1个像素点）

image

像上面这张图，把他看成是一个手机屏幕，假设他横向有1000个格子也就是像素点，纵向有500个格子，那么他的分辨率就是1000*500

屏幕像素密度

• 屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。如iPhone 3GS和iPhone 4的区别。屏幕尺寸一样，屏幕分辨率相差一倍，屏幕像素密度也相差一倍。如图：

image

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

image

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

image

计算结果与圈红相近

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

• 设备独立像素也称为密度无关像素,又叫dip或者是dp，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)，然后由相关系统转换为物理像素。
• 它可以用来辅助区分高清屏幕和非高清屏幕。(可以看看张鑫旭的文章)

两个像素

物理像素(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像素

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

image

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

image

设备像素比(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像素。

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

image

---

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

image

众所周知，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的深入理解

深入了解viewport和px

使用Flexible实现手淘H5页面的终端适配

viewports剖析

设备像素，设备独立像素，CSS像素

(整理到想哭哈哈哈)