前言
从HTML5入门到接触响应式开发以来，meta中针对viewport的固定设置就深入人心，如下
<meta name="viewport" content="width=device-width, initial-scale=1" />
可是许久许久都没没明白过为什么这样写，不知道有没有戳中你！
现在开始可以思考一下，你能想到的所有关于见过这个视口的定义默认视口、理想视口、可视视口、布局视口。
那么它们的概念与定义分别用来做什么呢？ 如何计算的呢！
必要科普
WEB程序是需要区分物理像素和css像素两个概念，这请不要搞混理解成一个。不过比较幸运的是css像素转换物理像素的过程已经被制定者们做好了所以学习时你可以不用关注这些。
基本的参考如下
CSS2.1规范精确化（2004年）
规定1px相当于1/96英寸。这个定义旨在提供一种相对稳定的参考尺度，使其在不同设备上具有可预测性（尽管实际物理尺寸会因设备PPI不同而变化）
针对定义使用上与观感上更接近于实际的物理尺寸，即屏幕尺寸越大css像素越多。
绝对不是物理像素越多css像素越多，你想想要真是那样，你就像是说我要手机作屏幕写代码，我的神眼能看见比沙子还小的点，因为根据设备PPI来说的话，每英寸的像素点，每英寸的像素点越多看起来越细致，但是分辨率对应的物理尺寸也就越小，我们的人眼所观测的物理尺寸有模糊的概念，越小越模糊。
移动端发展与概念深化（2007年后）
- 设备像素比引入：苹果公司2007年提出
viewport概念，为理解不同像素密度下的显示问题奠定了基础。随之发展出设备像素比概念，即物理像素 / CSS像素（如1个CSS像素对应4个物理像素） - 逻辑像素：CSS像素也被称为设备无关像素或逻辑像素（在移动端常表示为
dip），它构成了网页布局的逻辑坐标系，与物理屏幕的实际发光点区分开
正式开始
先说视口所可以应用的尺寸
- 默认视口：这个属于以前的过渡期的方案，以前支持移动端网页的网站非常少、大部分情况下还是从手机上看电脑版的页面，通过放大缩小来查看细节，那么为了兼容过渡便再不给视口定义的时候给一个默认的视口大小，基本参照应该是
1000像素左右。这跟你定义width=1000差不多 - 理想视口：这就是我们所经常用到的
device-width即设备物理屏幕的可见宽度，我的理解它是以css像素作为单位，它是固定不变的
首先要明白一个基础点就是，视口尺寸 如何被定义大小，device-width 就是所说的理想视口大小，1000就是一个固定的像素大小，它们都会被应用到布局视口。也就是100%或者100vw 是等于 viewport的width，当前这有一个前提，是不缩放的前提下，缩放是另一概念。
应用视口
-
可视视口：单听名字就是可以看到的区域、浏览器中哪里可以看到呢，一般讲就是我们网页可以展示的区域、请记住一点、它的尺寸不是我们定义的它是浏览器规定的，我查阅资料的理解是它默认尺寸大概就是
device-width也请大佬也可以予以指教，你可以让布局尺寸跟它一样大小，也可以让布局尺寸比它大或比它小 -
布局视口：这就是我们实际开发中用到的了，它是约束我们项目布局的核心，如上所说
100%或者100vw等于多少，就需要看你的布局视口的尺寸，如果你就想让其固定500px那么谁都拦不住你，但这样做只对你的开发较为友好、对用户不见得友好了。
实际测验尝试布局视口一定加上
user-scalable=no
如果你想求最准确的效果，就先不要启用缩放，因为缩放会改变可视视口以及布局视口的尺寸。
但同时请你注意一点，如果布局视口小于可视视口时会发生很神奇不可思议的事，你会发现可能跟你的预期不同，这是因为正常情况下布局视口最小尺寸是必须大于等于可视视口，如果小于我理解是通过缩放可视视口来满足，如果放大被限制如initial-scale=1,maximum-scale=2.0,那么优先用device-width * initial-scale 作为最小的布局视口，否则就是max(device-width / maximum-scale,布局视口)应该大概的兼容策略是这样的，我也只是实验了一部分,实验下来我理解的是和定义是这样的
布局视口必须大于或等于可视视口，可视视口的实际尺寸是通过计算最小尺寸或最大尺寸来做衡量的。
例图,我终于舍得放图了。
最后我们讲缩放
上面其实已经讲了很多关于缩放的知识，其实缩放理解起来可以说又简单又复杂，简单点就是公式很简单
device-width / max(min(缩放因子,minimum-scale),maximum-scale)
可视视口的尺寸即差不多如此计算。
复杂的在于布局视口，前面我们说过布局视口必须大于等于可视视口如果不大于等于呢，那么将会强制等于，就算你设置的视口是1000，如果可视视口最大是 10001那你的布局视口也必须是10001。
如果有人问那小于呢，小于布局视口不受影响，只是会多出滚动条，因为我们正常开发布局视口与可视视口几乎是相等的，所以是感受不出来这些的。
但如果你不懂这套逻辑的话，你会觉得一切很神奇，找不到一个落脚点来做出一个兼容性超强的程序！
最后最后的最后
谢谢大家阅读我的文章、我们都是追梦的少年，本人才学有限如果有什么误导也请赐教，赐教我学习以后也会马上改正文章中误人子弟的地方。
不过视口目前的使用好像只针对于移动端、平板端有效。
小分享
<!-- css中常用的媒体类型 all、screen、print 等等等 -->
<style>
/**要理解**/
@media screen {}
/**或者 **/
@media print {}
/**的含义**/
</style>
<!--有时甚至会遇见这样的代码 -->
<link rel="stylesheet" type="text/css" href="" media="screen,print" />
