前言

在移动端网页开发的时候，我们的页面将会不同于以往的PC网页的开发，因为PC网页的屏幕远远大于手机屏幕上的网页，我们在浏览器上开启手机调试模式的话，看到的效果会呈现出一个缩小的效果，所以我们一般都会制作一个能够适配于小屏幕手机的网站出来，供手机用户浏览。
但是对于viewport的概念可能还不太了解，下面我来讲讲我对viewport的理解

viewport

有时候被称为包含块或视口，可以认为他是html标签的上级元素，html标签会默认等同于他的宽度。

在PC端浏览器上的视口宽度是与浏览器内部的宽度是保持一致的，但是移动端浏览器的情况会不一样，介于各种设备的分辨率大小、以及浏览器的特性、供应商的要求等等方面，它们的视口大小可能会不一样。

一些苹果的手机设备会默认使用980px的视口大小，这就意味着你的网页在苹果手机上显示的效果，将会跟980px的pc下显示没有任何差别，只不过是缩小的而已。

(上图分别以iphone6和PC显示为例)

网页在手机设备上显示都会自动适应该手机设备的布局视口的宽度，因为有个默认的缩放比例，正好让980px缩放到375px（iphone6）的大小，这就是他能完全展示在手机屏幕上的原因。这时候的页面会呈现的很挤压，但是却能让980px的东西展示在手机上，这就牵扯到三个视口的概念，分别是：布局视口(layout viewport)，视觉视口(visual viewport)，理想视口(ideal viewport)

上面陈述的980px的大小其实是来自于布局视口。

我们透过手机屏幕看到的那部分区域——视觉视口

为了容纳手机这个较小的显示区域，视觉视口会默认等同于布局视口，但是手机屏幕远远达不到980px的宽度，所以在手机上会呈现"缩小"的状态，这样能够尽可能的完全渲染出来所有的页面内容，在使用手机调试模式看的时候可以发现这一点。

这时候视觉视口可以通过放大缩小来看到网页的不同角落，但是体验性是很差的。甚至如果页面宽度过大会出现横向滚动条。

如何做到理想地展示网页的大小，那就需要搬出——理想视口。

理想视口（ideal viewport），其实就是手机屏幕的大小，将布局视口设置成理想视口，页面就能够适应到合适的尺寸，用户就不再需要自己去缩放和拖动网页了。利用以下代码可以达到这一点：

<meta name="viewport" content="width=device-width"/>

这里的width设置就是布局视口的宽度，device-width代表着理想视口的宽度。

可以看到980px的视口现在变成了320px。

这个属性还是有其他成员的：

width 设置的布局视口的宽度
initial-scale 设置初始缩放比例和布局视口的宽度
minimun-scale 设置最小缩放比例
maximum-scale 设置最大缩放比例
height 设置布局视口的高度，但是好像没有作用
user-scalable 是否允许用户缩放 no为不允许

我们通常看到的代码都是家庭总动员：

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

但是其中的意义还是比较含混，好比如这个 "initial-scale=1.0"，为什么需要缩放1倍？

这个初始缩放比例其实是相对于理想视口的，也就是仅仅使用这样的代码就可以达成理想视口：

<meta name="viewport" content="initial-scale=1.0">

这段话的意义是将布局视口设置成1倍于理想视口。

那为什么需要多写一遍，原因在于兼容性的问题

我们从上表可以得知，苹果产品是没有完全支持width的，相反IE也不完全支持initial-scale，所以为了达成所有浏览器都能兼容的目的，必要地需要去做这样操作。

initial-scale：先前说到这是相对与理想视口的宽度，就是说如果我们在375px上的屏幕上使用0.5的缩放的话视觉视口就是160px了，是吗？

并不是，现在在视口的大小是：750

原因是原先的1个CSS像素宽能表示2个设备像素宽,现在只能表示1个了（1/2）,这时候像素会增多，展示的内容也会增多，所以像素会比原先多了一倍，内容看上去也会小很多

这里有个专门的公式能够告诉你现在的视口是多大：

视觉视口宽度=理想的视口宽度/缩放因子

(上图是用1倍的缩放比例，下图是用2倍的缩放比例)

这里说的CSS像素和设备像素是什么？

设备像素和CSS像素这里讲到的像素指的分别是我们手机屏幕上看到的物理像素以及我们在CSS中使用的像素，他们不是等同的概念.

正常而论，在PC端上是1个设备像素对应1个CSS像素，但在移动端上很多时候其实他们都不是 1：1的关系的。

 而能影响CSS像素与设备像素的对应关系的就是：缩放比例和DPR（设备像素和CSS像素的比值，即设备像素比）。

为什么说1个CSS像素宽表示2个设备像素宽？

这是随着时代的变迁带来的结果，市面上的手机不断在更新换代，屏幕的分辨率也在步步攀升，作为手机市场的领头羊——苹果，首先推出了retina屏幕，这时候的dpr=2，像素的密度比之前高了一倍，这样能呈现更清晰、更细腻的效果，原本的1个CSS像素这时候对应的是2倍的设备像素，但其实CSS像素是没有变化的，100px仍然是100px，变化的是设备像素的多少。