系列文章
meta 标签
要回答这个问题，首先我们要知道什么是 meta 标签：
元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
上面的文字摘自 w3cschool 中文版中对 meta 标签的描述。通过这句话可以知道，meta 标签主要用于描述页面的一些信息。
通过查阅文档，我们可以知道 meta 标签提供三个参数
- name
- http-equiv
- content
- scheme
其中 content 是对另外两者的描述，类似于 json 中键值对的形式，而 scheme 定义用于翻译 content 属性值的格式。
我们来看一个基本的 meta 标签。
<meta name="keywords" content="html,css,javascript,vue">
这个标签描述了网页的关键字有 html，css，javascript 和 vue。
有兴趣详细了解的童靴可以看看这里。
viewport
知道了什么是 meta 标签，我们可以来看看 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 不允许用户缩放 |
看到这，相信你已经明白，meta viewport 是用来做什么的，应该怎么写了。
