移动Web开发基础-Viewport

导语：移动Web开发自然要从Viewport说起，那什么是Viewport呢？字面意思为视图窗口，在移动设备上就是指用来显示页面的那部分区域。

用移动设备来访问没有做特殊处理的PC页面，移动设备是显示不下那么宽的内容的，所以移动设备一般会将页面缩小来显示整个页面，用户可以将页面放在来看清楚内容，在做移动Web开发的时候，我们可以手动的设置页面的视窗宽度，页面缩放比例以及是否允许用户缩放等，那具体我们该怎么设置Viewport呢？我们先来了解移动Web开发的其他几个概念。

设备像素

对于设备来说，有两个设备像素：物理像素和独立像素。

物理像素：

设备的物理像素是指在设备屏幕上显示的最小的单元，也就是屏幕分辨率，比如iPhone 6的分辨率是750像素*1334像素。每个物理像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。

独立像素：

设备独立像素又称CSS像素，这是一个抽象的概念，是指Web编程中的逻辑像素。如iPhone 6的CSS像素是375像素*667像素，可以看出来，这刚好是物理像素的一半，他们之间的关系后面会讲到。也就是说，如果我们在css代码中设置某个div的宽度为375px，在iPhone 6竖屏情况下，刚好能占满屏幕宽度。

像素密度（PPI）

每英寸像素（英语：Pixels Per Inch，缩写：PPI），又被称为像素密度，是一个表示打印图像或显示器单位面积上像素数量的指数。一般用来计量电脑显示器，电视机和手持电子设备屏幕的精细程度。通常情况下，每英寸像素值越高，屏幕能显示的图像也越精细。
有研究表明，人类肉眼能够分辨的最高像素点密度是300每英寸像素。[1]超过300每英寸像素的屏幕被常常称为Retina显示屏，这个概念最早由苹果公司于2010年推出iPhone 4手机的时候提出。

屏幕PPI计算公式：
要计算显示器的每英寸像素值，首先要确定屏幕的尺寸和分辨率。

其中，

• dp为屏幕对角线的分辨率
• wp为屏幕横向分辨率
• hp为屏幕纵向分辨率
• di为屏幕对角线的长度(单位为英寸)

以屏幕尺寸为4吋的iPhone 5为例，分辨率为1136x640，像素密度为326PPI。而分辨率为1920x1080的家用21.5寸显示