1.ViewPort的概念和背景
（1）ViewPort背景
讲移动端的H5开发的时候，首先我们得了解Viewport这个概念。先从背景讲起，早期的很多网站都是专门针对PC显示器浏览而设计的，反而很少考虑多去适应手机的屏幕。随着手机移动端的普及，用手机去浏览大多数网站的时候就会出现问题（当年web页面都是宽屏的，差不多是按1024px宽度去设计的）。固定宽度的页面，在手机上预览就会出现横向竖向滚动条。为了能够在手机上获得更好的网页浏览体验，Apple提出了一个办法。在IOS手机的Safari浏览器定义Viewport meta标签，该标签的意义是告诉Safari浏览器创建一个虚拟窗口(ViewPort),这个窗口的分辨率接近于PC显示器的分辨率，使得页面能够完整的呈现在手机屏幕上。最后面就是各个浏览器厂商借这个概念，为了更好的用户体验也同样支持Viewport了。
（2）Visual ViewPort和Layout ViewPort
这里说到ViewPort的背景后，移动端H5开发中要提到两个概念分别是Visual ViewPort（可视窗口）和Layout ViewPort（布局窗口）。
- Visual ViewPort（可视窗口）就是手机屏幕的可视区域，可以通过横竖滑动条或者放大缩小预览网页的窗口。（其大小可通过window.innerWidth获取）
- Layout ViewPort（布局窗口）主要是用来展示原始页面，其窗口的分辨率跟PC显示器分辨率相接近。（其初始页面宽度与不同设备浏览器相关，其大小可通过document.documentElement.clientWidth获取）
（3）移动设备上的逻辑像素和物理像素
从Visual ViewPort和Layout ViewPort的图中我们可以发现一个场景，如果我们将Visual ViewPort放大到和Layout ViewPort相同的宽度。那么是不是整个页面就可以显示在手机屏幕上了，但是其实这还是有问题的（缩放到跟Layout ViewPort原始宽度一样的话，页面元素也会按照比例缩放导致文字看不清）。
出现上述的原因，主要还是因为屏幕css渲染的逻辑像素与屏幕的物理像素意义上不同导致的。以前在PC浏览器页面的开发上，css使用的1px逻辑像素跟电脑屏幕的1px的物理像素是对应的。但是换在手机上却不一样了，因为移动设设备屏幕尺寸一般恒定的在4-6寸，而屏幕物理像素点越来越多。那么单位区域内，一个逻辑像素就需要多个物理像素点去展示，这个概念就称为设备像素比例（devicePixelRatio，可以通过Window对象获取但不一定准确。devicePixelRatio = 物理像素 / 逻辑像素）。 根据像素比例的公式，我们可以通过物理像素和设备像素比（与屏幕密度有关,可以网上搜索下如何获取设备屏幕密度以及设备像素比）去得出实际需要的逻辑像素。最后通过设备实际物理长宽像素值，去计算出逻辑长宽像素值，此时的1px才与css中1px是等同的概念（如果设计师给的是1080P的设计稿，这时候就要根据实际的逻辑像素，对标注单位进行等量放缩了）。 注：这里可能很多人会有个错觉，PC端开发CSS的1px跟显示器物理像素1px是一样的，所以css的1px跟手机屏幕像素1px是一样的，其实这个理解是错误的。逻辑像素是个与物理无关的一个标识单位。
2.完美适配的ViewPort
根据上述对ViewPort和逻辑像素的介绍。下来再介绍一个完美适配移动设备的viewport，其主要的特点就是：
- 首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容
- 显示的元素(文字图片等)的大小是合适，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。
所以这个viewport的宽度等于移动设备的屏幕宽度,而且页面设计要按照通过设备物理像素和设备像素比计算出来的逻辑分辨率进行设计。这样展示出来的页面才是完美适配移动设备的viewport。 当然这个viewport只是一个抽象的定义，具体怎么得到这个viewport，是需要通过Viewport meta标签去告诉浏览器去调整Layout ViewPort来得到的。
在苹果的规范中meta viewport标签有6个属性
width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
我们在开发页面时，就可以把以下这句代码贴到Head标签中，就可以得到一个合适的viewport了：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0， user-scalable=no">
上述代码就是告诉浏览器，使其layout viewport等于设备的宽度，设置缩放值为1，禁止用户缩放，强行设置最大最小缩放比为1.0。最后我们可以得到的效果就是一个没有横向滚动条的，且页面最大的宽度等于设备宽度的这么一个页面了。后续我们页面设计就可以按照实际的逻辑像素进行设计。这里我贴下一些设备通过其物理像素和设备比例计算出来后的一个合适的逻辑分辨率值。
如果想设计出能够适配移动端的页面，只需要按照该分辨率进行页面编写就行了。
3.总结
最早期刚刚接触ViewPort的时候其实还是比较懵逼的，因为以前没接触过前端这块的开发，也不知道响应式设计是怎样的。参考了一些文章，看懂了这块ViewPort的概念，虽然我参考的文章里面说ViewPort分别是layout viewport、visual viewport、ideal viewport。但是本人还是觉得这块主要存在的还是layout viewport和visual viewport。其实ideal viewport无非是通过标签调整layout viewport的宽度，然后使得逻辑像素能够跟PC显示器一样，能够使元素完整展示出来不会有太大差别就行了。综上，其实比较难理解的还是设备物理像素和逻辑像素（也叫独立像素）的区别，如果这块能够理解这块。其实对Viewport概念也是挺容易掌握的。
