01.基础知识

1.1   屏幕

移动设备与PC设备最大的差别在于屏幕，这主要体如今屏幕尺寸和屏幕分辨率两个方面。

一般咱们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（通常用英寸来度量）以下图所示

而分辨率则通常用像素来度量 px，表示屏幕水平和垂直方向的像素数，例如1920*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成，以下图所示

 

 

1.2   长度单位

在Web开发中可使用px（像素）、em、pt（点）、in（英寸）、cm（厘米）作为长度单位，咱们最经常使用px（像素）作为长度单位。

咱们能够将上述的几种长度单位划分红相对长度单位和绝对长度单位。

如上图所示，iPhone3G/S和iPhone4/S的屏幕尺寸都为3.5英寸（in）可是屏幕分辨率却分别为480*320px、960*480px，由此咱们能够得出英寸是一个绝对长度单位，而像素是一个相对长度单位（像素并无固定的长度）。

 

1.3   像素密度

DPI（Dots Per Inch）是印刷行业中用来表示打印机每英寸能够喷的墨汁点数，计算机显示设备从打印机中借鉴了DPI的概念，因为计算机显示设备中的最小单位不是墨汁点而是像素，因此用PPI（Pixels Per Inch）值来表示屏幕每英寸的像素数量，咱们将PPI、DPI都称为像素密度，但PPI应用更普遍，DPI在Android设备比较常见。

以下图所示，利用 勾股定理 咱们能够计算得出PPI

PPI值的越大说明单位尺寸里所能容纳的像素数量就越多，所能展示画面的品质也就越精细，反之就越粗糙。

Retina即视网膜屏幕，苹果注册的命名方式，意指具备较高PPI（大于320）的屏幕。

 

1.4   设备独立像素

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

以下图，假设你设计了一个163*163的蓝色方块，在PPI为163的屏幕上，那这个方块看起来正好就是1*1寸大小，在PPI为326的屏幕上，这个方块看起来就只有0.5*0.5寸大小了。

作为用户是不会关心这些细节的，他们只是但愿在不一样PPI的设备上看到的图像内容差很少大小，因此这时咱们须要一个新的单位，这个新的单位可以保证图像内容在不一样的PPI设备看上去大小应该差很少，这就是独立像素，在IOS设备上叫PT(Point)，Android设备上叫DIP(Device independent Pixel)或DP。

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

咱们也不难发现，若是想要iPhone 3G/S和iPhone 4/S图像内容显示一致，能够把iPhone 4/S的尺寸放大一倍（它们是一个2倍(@2x)的关系），即在iPhone3G/S的上尺寸为44*44px，在iPhone4/S上为88*88px，咱们要想实现这样的结果能够设置44*44dp，这时在iPhone3G/S上表明44*44px，在iPhone4/S上表明88*88px，最终用能够看到的图像差很少大小。

经过上面例子咱们不难发现dp同px是有一个对应（比例）关系的，这个对应（比例）关系是操做系统肯定并处理，目的是确保不一样PPI屏幕所能显示的图像大小是一致的，经过window.devicePixelRatio能够得到该比例值。

下图展现了iPhone不一样型号间dp和px的比例关系

从上图咱们得知dp（或pt）和px并不老是绝对的倍数关系（并不总能保证可以整除），而是window.devicePixelRatio ~= 物理像素/独立像素，然而这其中的细节咱们没必要关心，由于操做系统会自动帮咱们处理好（保证1dp在不一样的设备上看上去大小差很少）。

 

1.5   像素

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

// 获取屏幕的物理像素尺寸

window.screen.width;

window.screen.height;

// 部分移动设备下获取会有错误，与移动开发无关，只须要了解

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

咱们经过调整浏览器的缩放比例能够直观的理解CSS像素与物理像素以前的对应关系，以下图所示：

 咱们须要理解的是物理像素和CSS像素的一个关系，1个物理像素并不老是等于一个CSS像素，经过调整浏览器缩放比例，能够有以上3种状况。

 

远程调试

 

   模拟调试

现代主流浏览器均支持移动开发模拟调试，一般按F12能够调起，其使用也比较简单，能够帮咱们方便快捷定位问题。

  真机调试

模拟调试能够知足大部分的开发调试任务，可是因为移动设备种类繁多，环境也十分复杂，模拟调试容易出现差错，因此真机调试变的很是必要。

有两种方法能够实现真机调试：

一、将作好的网页上传至服务器或者本地搭建服务器，而后移动设备经过网络来访问。（重点）

二、借助第三方的调试工具，如weinre、debuggap、ghostlab(比较)等

真机调试必须保证移动设备同服务器间的网络是相通的。