前言
在移动端网页开发的时候，我们的页面将会不同于以往的PC网页的开发，因为PC网页的屏幕远远大于手机屏幕上的网页，我们在浏览器上开启手机调试模式的话，看到的效果会呈现出一个缩小的效果，所以我们一般都会制作一个能够适配于小屏幕手机的网站出来，供手机用户浏览。
但是对于viewport的概念可能还不太了解，下面我来讲讲我对viewport的理解
viewport
有时候被称为包含块或视口，可以认为他是html标签的上级元素，html标签会默认等同于他的宽度。
在PC端浏览器上的视口宽度是与浏览器内部的宽度是保持一致的，但是移动端浏览器的情况会不一样，介于各种设备的分辨率大小、以及浏览器的特性、供应商的要求等等方面，它们的视口大小可能会不一样。一些苹果的手机设备会默认使用980px的视口大小，这就意味着你的网页在苹果手机上显示的效果，将会跟980px的pc下显示没有任何差别，只不过是缩小的而已。
网页在手机设备上显示都会自动适应该手机设备的布局视口的宽度，因为有个默认的缩放比例，正好让980px缩放到375px（iphone6）的大小，这就是他能完全展示在手机屏幕上的原因。 这时候的页面会呈现的很挤压，但是却能让980px的东西展示在手机上，这就牵扯到三个视口的概念，分别是：布局视口(layout viewport)，视觉视口(visual viewport)，理想视口(ideal viewport)
上面陈述的980px的大小其实是来自于布局视口。我们透过手机屏幕看到的那部分区域——视觉视口
为了容纳手机这个较小的显示区域，视觉视口会默认等同于布局视口，但是手机屏幕远远达不到980px的宽度，所以在手机上会呈现"缩小"的状态，这样能够尽可能的完全渲染出来所有的页面内容，在使用手机调试模式看的时候可以发现这一点。
这时候视觉视口可以通过放大缩小来看到网页的不同角落，但是体验性是很差的。 甚至如果页面宽度过大会出现横向滚动条。如何做到理想地展示网页的大小，那就需要搬出——理想视口。
理想视口（ideal viewport），其实就是手机屏幕的大小，将布局视口设置成理想视口，页面就能够适应到合适的尺寸，用户就不再需要自己去缩放和拖动网页了。 利用以下代码可以达到这一点：
复制代码
这里的width设置就是布局视口的宽度，device-width代表着理想视口的宽度。
这个属性还是有其他成员的：
width 设置的布局视口的宽度initial-scale 设置初始缩放比例和布局视口的宽度minimun-scale 设置最小缩放比例maximum-scale 设置最大缩放比例height 设置布局视口的高度，但是好像没有作用user-scalable 是否允许用户缩放 no为不允许复制代码
我们通常看到的代码都是家庭总动员：
复制代码
但是其中的意义还是比较含混，好比如这个 "initial-scale=1.0"，为什么需要缩放1倍？
这个初始缩放比例其实是相对于理想视口的，也就是仅仅使用这样的代码就可以达成理想视口：
复制代码
这段话的意义是将布局视口设置成1倍于理想视口。
那为什么需要多写一遍，原因在于兼容性的问题initial-scale：先前说到这是相对与理想视口的宽度，就是说如果我们在375px上的屏幕上使用0.5的缩放的话视觉视口就是160px了，是吗？
并不是，现在在视口的大小是：750
原因是原先的1个CSS像素宽能表示2个设备像素宽,现在只能表示1个了（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，变化的是设备像素的多少。
而我们在使用0.5缩放比例的时候，呈现的效果如图示是这样的：
好了 以上是个人结合其他大神理解得来的 还请各位大神不要见笑~ 恳求指正学习~