首先，我们要知道meta标签和viewport属性都是干什么用的，才可以回答这个问题
meta标签
元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
这是w3cschool对于meta 标签的描述。通过这句话可以知道，meta 标签主要用于描述页面的一些信息。meta标签可以提供四个参数：
- name
- http-equiv
- content
- scheme 其中 content 是对另外两者的描述，类似于 json 中键值对的形式，而 scheme 定义用于翻译 content 属性值的格式。
例：
<meta name="keywords" content="html,css,javascript,vue">
这个标签描述了网页的关键字有 html，css，javascript 和 vue。
viewport
接下来我们再来看viewport ，viewport 是 meta 标签的 name 属性中可选值中的一个，指 web 页面上用户可见的区域，用于移动端页面设计 例：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
当然，很多小伙伴平时可能有使用过这段代码，却没有探究过它的原理：为什么使用了这段代码，就能进行响应式开发了？
要回答这个问题，我们先来看看曾经的前端移动开发面临的困境：
由于一开始的网页主要只是用于在 PC 上展示，所以开发者们并没有过多考虑关于移动端访问的问题，但随着移动端的兴起，越来越多的 Web 访问变成了通过移动端进行的。而由于 PC 端的 viewport 比移动端大，所以为了解决这个问题，浏览器只能的等比的缩小整个页面，导致页面的字体，图片等等都显得非常小，而由于 PC 端的 viewport 是横屏的（宽大大于高），而移动端是竖屏，所以用户放大网页之后还会出现横向的滚动条，这一系列都让用户体验相当不好。 所以为了解决上面的问题，最早由 Apple 在 Safari iOS 中引入了 viewport meta 标签，让Web开发人员控制视口的大小和比例。
让我们再来看看一开始的设置：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
| key | mean | example |
|---|---|---|
| width | 视口的宽度 | width=device-width 指缩放为 100% 时以 CSS 像素计量的屏幕宽度 |
| initial-scale | 初始化缩放比例 | initial-scale=1.0 初始化不进行缩放 |
| maximum-scale | 用户最大缩放比例 | maximum-scale=1.0 不允许用户缩放 |
当你掌握了viewport，那么意味着你已经大致了解了移动平台与PC平台的不同，你可以更专注而细致的去解决某些平台差异问题。
