移动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寸显示器，像素密度为103PPI。

看一下不同PPI的设备显示效果：

iPhone 3GS (160每英寸像素，MDPI) 和 iPhone 4 (326每英寸像素，XHDPI)

除此之外，我们还可以通过下面的设备像素比（dpr）来判断是不是Retina显示屏。

设备像素比（DPR）

设备像素比(Device Pixel Ratio 简称：DPR)，是指物理像素和CSS像素的比例。

设备像素比（DPR） = 物理像素个数 / CSS像素个数 （计算公式，前提是缩放比为1）

对于一般的显示屏设备来说，DPR一般为1：1，但是在Retina屏幕设备中，DPR一般都是大于1：1的，以DPR为2的 iPhone 6 为例。

这也就是为什么我们的设计稿一般按手机物理像素的两倍来做的原因，我们移动端的图片也都是按两倍屏或三倍屏要处理，因为如果按一倍来处理的话，我们的图片在手机设备上相当于放大到了两倍，会造成图片的模糊。

目前市场中智能手机的DPR一般都是2或者3，对于iPhone手机来说比较明确，但是对于Android设备，目前各大手机厂商还没有得到很好的统一，有比较多样的比例。

关于设备屏幕的一些信息，可以通过 http://screensiz.es 这个网站来查看，也可以通过 https://material.io/devices/ 来查看自己的设备屏幕信息，扫码更方便。

视口

布局视口（Layout Viewport）

在PC浏览器中，视口只有一个，并且 视口的宽度 = 浏览器窗口的宽度。在移动端，视口和浏览器窗口将不再关联，布局视口要比浏览器窗口大的多。布局视口是移动端CSS布局的依据，即CSS布局会根据布局视口来计算。

视觉视口（Visual Viewport）

用户正在看到网站的区域。

理想视口（Ideal Viewport）

布局视口的宽度一般在 680~1024像素之间，这样可以使得PC网站在手机中不被压扁，但是这并不理想，因为手机更适合窄的网站，换句话说，布局视口并不是最理想的宽度。

理想视口，定义了理想视口的宽度，比如对于iphone6来讲，理想视口是375*667px。但是最终作用的还是布局视口，因为我们的css是依据布局视口计算的，所以可以这样理解理想视口：理想的布局视口。

我们可以通过设置Viewport的width= device-width 就可以将 Layout Viewport 的宽度设置为 Ideal Viewport 的宽度。

设置Viewport

上面说了，要想我们的网站在手机那么小的设备上也能正常查看，我们通常将布局视口的宽度设置为理想视口的宽度，也就是width= device-width，完整的Viewport设置如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

device-width - 设备的宽度initial-scale - 初始的缩放比例  minimum-scale - 允许用户缩放到的最小比例   maximum-scale - 允许用户缩放到的最大比例  user-scalable - 用户是否可以手动缩放 

这些值都可以通过JS的脚本注入到html中，所以后面还会讲基于此的一些适配解决方案。

参考来源：
1.《指尖上行 移动开发进阶之路》
2.一篇真正教会你开发移动端页面的文章(一)