什么是viewport声明？
viewport是用于开发移动站点的一种meta元信息，主要用来告诉浏览器视口大小。
怎么用？
<meta name="viewport" content="width:device-width, initial-scale=1.0, user-scalable=no, maxinum-scale=1.0, minimum-scale=1.0">上面就是一条完整的viewport声明，其中 "width=device-width" 表示把viewport设置为设备逻辑大小（后面会讲逻辑大小概念），你也可以把它设置成任何你想要的宽度，单位px可带可不带
概念
layout viewport
布局视口，
它总是等于设备屏幕大小，但在以下两种情况下，前面的结论不成立：
- 没有声明viewport
- 根元素html 或 body上设置了固定大小
第一种情况下，viewport使用以下黙认值：
| 980 | 980 | 980 | 980 |
第二种情况下，viewport等于设置的固定大小
如果想查看你的手机浏览器布局视口大小，可通过以下代码获取：
document.body.clientWidth;
document.body.clientHeight;visual viewport
视觉视口，它是设备屏幕的逻辑大小，它用像素来表示
document.documentElement.clientWidth;
document.documentElement.clientHeight;通过上面的代码获取视觉视口的宽高
跟布局视口一样，没有声明viewport时，大小跟布局视口一样。
如果布局视口大于视觉视口，会出现滚动条。
下面讲讲设备屏幕的逻辑大小，在开始前，先了解下面3个概念：
- ppi —— 每英寸像素点数量
- 基准ppi—— ≈160/inch
- 显示比例—— 设备ppi / 基准ppi
现在的手机都是高清屏——肉眼看不出像素点，电脑是普通屏——ppi ≈ 72 ，这样就出现了一个问题，
在电脑上的14px，放到手机上，视觉大小相当于7px甚至更小，这是因为像素是一个相对单位，它的大小取决于设备像素点大小，这时手机浏览器就需要处理一下，把它放大一些，上面的显示比例就是一个放大倍数，如显示比例为2，那么在手机上就用2倍比例来显示。
ideal viewport
理想视口，顾名思义就是最理想的视口大小——用户无需缩放或滚动就可以浏览横向的全部内容。
它只是一种概念——用于指导开发者设计最理想的页面大小，它的宽度应为设备逻辑宽度。
关于viewport的知识就讲这些，不对的地方欢迎指出