讲点历史
在讲关于viewport之前，就不得不聊下前端在移动端的发展了。
在早期，前端网页只在PC端上展示，无需考虑移动端怎么展示，后来移动端快速发展，前端网页设计自然就要考虑到如何兼容移动端。
可是这就有一个问题，前端页面在pc端上能够正常展示，可是在移动端，手机屏幕就那么大，这就导致网页在移动端展示时，无法完全展示，你只能通过手动缩放来达到完全展示的目的，这样的体验让人难以接受。
apple公司就提出了一个viewport的东西，我可以通过虚拟一个视窗，用来渲染你的页面，我这个视窗默认宽度是980px，因为当时PC端页面宽度也是基本上这么宽，这样就能够完全能够解决，你在PC端上正常展示的页面，放在移动端也是能够完全展示出来的。
媒体查询
现在的网页设计，如果有多端展示的需求，基本上都是一个端设计一套页面，很少做自适应，比如JD、TB。但有些网站还是需要考虑到网页响应式，如知乎。
如果你使用@media媒体查询，为你的页面设计了响应式，但是在调试的时候发现，在移动端上的响应式样式没有生效，那么你就需要在你的HTML页面上加上这么一句
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"/>
解释下这些属性
- width=dveice-width ：让虚拟的窗口（viewport）宽度等于你设备屏幕的宽度
- initial-scale=1 ：初始缩放比例，也即是当页面第一次 load 的时候缩放比例
- minimum-scale=1 ：允许用户缩放到的最小比例
- maximum-scale=1 ：允许用户缩放到的最大比例
- user-scalable=no ：用户是否可以手动缩放
- viewport-fit=cover ：网页内容完全覆盖可视窗口，解决刘海屏等异形屏的页面展示问题
