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

前言

移动设备愈来愈普及啦，因此咱们不能只停留在开发PC端页面，和一包一块儿来学学移动端Web开发吧~

移动开发特色

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

基本概念

视窗 viewport

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

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

  屏幕尺寸

• 指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。常见的屏幕尺寸有2.四、2.八、3.五、3.七、4.二、5.0、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像素)，而后由相关系统转换为物理像素。
• 它能够用来辅助区分高清屏幕和非高清屏幕。(能够看看张鑫旭的文章)

两个像素

物理像素(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的深刻理解

深刻了解viewport和px

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

viewports剖析

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

(整理到想哭哈哈哈)