移动前端学习笔记（1）——视口（viewport）基础

学习web移动开发的第一步，是要掌握好移动端显示的一些基本概念。

首先，贴一下一个资深整理人的博客，感觉整理得很到位。

基本概念

屏幕尺寸：通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量）。

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

PPI（Pixels Per Inch）：像素密度，来表示屏幕每英寸的像素数量，可利用勾股定理计算PPI。

设备独立像素：

像素单位的缺陷：不同设备的像素密度PPI是不同的，如 iPhone3G/S 为163PPI，iPhone4/S 为326PPI，这导致同样尺寸的图像在不同PPI设备上的显示大小不一样。比如说一张163*163px 的图片，它在 iPhone3G/S 中是1*1寸，但是在 iPhone4/S 中却是0.5*0.5寸。

设备独立像素：

设备独立像素是一个新的单位，它与像素单位有一个对应的比例关系。在IOS设备上叫PT(Point)，Android设备上叫DIP(Device independent Pixel)或DP。

如 iPhone 3G（PPI为163）中1dp = 1px，iPhone 4（PPI为326）1dp = 2px。那么一张163*163dp的图片，在iphone3中是163*163px，在iphone4中是326*326px，最终用户看见的图片大小是差不多大的。

获取当前设备独立像素：w