viewport 视口
width: 视口宽度
device-width: 设备屏幕宽度pc端
pc端只有一个视口，也就是浏览器主窗口的区域
手机端
移动端有三种视口：
布局视口： layout viewport
可视视口： visual viewport
理想视口： ideal viewport- 可视视口
可视视口一般式不固定的，用户的缩放、拖动会修改。
- 布局视口
布局视口在每一款设备上是不变的。
因为移动端的屏幕尺寸都比较小，我们的页面根本放不下，这就有了布局视口的概念了，布局视口是虚拟的，一般都比较大，用户可以通过移动页面，缩放来通过可视视口查看页面的全部内容。
但是只是有这两个视口还是不行的，用户体验不是很好，这就有了我们的理想视口。
- 理想视口
理想视口就是布局视口在一个设备上的最佳尺寸，理想视口下的页面便于阅读。
怎么使用理想视口呢？
<meta name="viewport" content="width=device-width" />
// 这句话告诉，我要使用理想视口。也就是让布局视口的宽度等于可视视口的宽度 - 不指定该属性
布局视口的宽度为厂商默认的宽度- 指定属性
布局视口将称为理想视口，也就是等于可视视口。通常我们会直接指定用户的缩放比例为1
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。