<meta name="viewport" content="width=device-width, initial-scale=1.0">
meta是html语言head区的一个辅助性标签，位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。
在你的问题
首先 name="viewport" 该属性仅对移动端有效对PC端是无效的
width=device-width
定义该网页的视口大小宽度为：device-width 【用户所使用设备的宽度】
initial-scale=1.0
意思是指视口缩放比例为1.0，也就是不缩放。
视口可以理解为设备或文档对象的逻辑尺寸。
前端ppk大神认为，移动设备上有三个viewport（视口）。
但可以换句话说，可以缩放的浏览器中都具有三个视口概念，分别是 布局视口、视觉视口、理想视口。
但在iphone和ipad上，无论是竖屏还是横屏，device-width宽度都是竖屏时理想视口的宽度。
当只设置width属性值，而不指定initial-scale属性值时，大多数浏览器会自动缩放。
如果width属性值大于理想视口宽度，则视觉视口放大为width的值，计算得到scale小于1.0；
如果width属性值小于理想视口宽度，则视觉视口缩小为width的值，计算得到scale大于1.0；
这么做的目的是让设备屏幕把完整的页面呈现出来（页面横向塞满屏幕，计算得到scale）
设置width而不指定initial-scale时，设置minimum-scale = 1.0会能够阻止浏览器放大视觉视口，设置maximum-scale = 1.0 能够阻止浏览器缩小视觉视口。（这里有点绕，可以联想下放大镜）
这里不做介绍了。可以参看一篇文章网页链接
希望对你有所帮助~记得采纳
meta标签共有两个属性，分别是http-equiv属性和name属性。1. name属性
name属性主要用于描述网页，比如网页的关键词，叙述等。与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。meta标签中name属性语法格式是：
<meta name="参数" content="具体的描述">。
其中name属性共有以下几种参数。(A-C为常用属性)
A. keywords(关键字)
说明：用于告诉搜索引擎，你网页的关键字。举例：
<meta name="keywords" content="Lxxyx,博客，文科生，前端">
B. description(网站内容的描述)
说明：用于告诉搜索引擎，你网站的主要内容。举例：
<meta name="description" content="文科生，热爱前端与编程。目前大二，这是我的前端博客">
C. viewport(移动端的窗口)
说明：这个概念较为复杂，具体的会在下篇博文中讲述。这个属性常用于设计移动端网页。在用bootstrap,AmazeUI等框架时候都有用过viewport。
举例（常用范例）：
<meta name="viewport" content="width=device-width, initial-scale=1">
D. robots(定义搜索引擎爬虫的索引方式)
说明：robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。
举例：
<meta name="robots" content="none">
具体参数如下：
1.none : 搜索引擎将忽略此网页，等价于noindex，nofollow。
2.noindex : 搜索引擎不索引此网页。
3.nofollow: 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
4.all : 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
5.index : 搜索引擎索引此网页。
6.follow : 搜索引擎继续通过此网页的链接索引搜索其它的网页。
E. author(作者)
说明：用于标注网页作者举例：
<meta name="author" content="Lxxyx,[email protected]">
F. generator(网页制作软件)
说明：用于标明网页是什么软件做的举例: (不知道能不能这样写)：
<meta name="generator" content="Sublime Text3">
G. copyright(版权)
说明：用于标注版权信息举例：
<meta name="copyright" content="Lxxyx">//代表该网站为Lxxyx个人版权所有。
H. revisit-after(搜索引擎爬虫重访时间)
说明：如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。如果重访时间过短，爬虫将按它们定义的默认时间来访问。举例：
<meta name="revisit-after" content="7 days" >
I. renderer(双核浏览器渲染方式)
说明：renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。举例：
<meta name="renderer" content="webkit">//默认webkit内核
<meta name="renderer" content="ie-comp">//默认IE兼容模式
<meta name="renderer" content="ie-stand">//默认IE标准模式
