调研了一下meta标签，总结一些心得。

meta标签主要是提供了有关页面的一些描述信息和HTTP标题信息，例如一些有关网页的描述和关键字等等，这些信息是用户不可见的。

<meta http-equiv="Content-Type" Content="text/html; Charset=gb2312">

定义了HTML页面所用的字符集，这个方法只是在html4中存在，在html5中可以直接通过charset属性进行字符集的设置，还有一个有意思的用法，meta可以让你的页面跳转

<meta http-equiv="Refresh" Content="5; Url=http://www.baidu.com">

页面会在5s之后跳转到百度首页，上面两个用法提到的http-equiv 属性，实际上是服务器把名称/值对添加到发送给浏览器的内容头部。

<meta http-equiv="charset" content="iso-8859-1">

这时发送到浏览器的头部就应该包含:

content-type: text/html
charset:iso-8859-1

因为所有服务器至少会发送一个：

content-type:text/html

meta标签还有一个name属性，name属性的值有author(网站作者)、description(网站描述)、keywords(网站的关键字)、generator(编辑软件)、revised(软件的版本)。
keywords和description通常是帮助搜索引擎更好的获取你页面的内容，制定搜索的关键字。

ViewPort

如果一个在PC上正常浏览的网页，放到移动设备上，移动设备会默认先将网页放入一个虚拟的窗口中，这个窗口就是viewport。这个窗口会比手机的屏幕宽大，网页加载之后，再通过整体的缩放（或者是3：1，或者是2：1），来让网页整个现实到屏幕上。

通常经过这样的缩放，页面上的元素已经很难看清楚了，为了解决这样的问题，可以使用meta标签的viewport属性，来人为的制定viewport的大小，这样，就可以避免由于缩放引起的问题。、

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no;" />

这里面制定的宽度为设备宽度，高度为设备的高度，inital-scale表示初始的缩放比例，maximum-scale和minimum-scale分别代表用户能缩放的最大和最小的比例，user-scalable则指定了用户是否可以进行缩放。

通过这样的设置，使viewport和设备的屏幕大小一样，因此就不会产生缩放。元素也就能够看得清了。同时，在缩放比例为100%(也就是1，也就是没有进行缩放的时候)，设备的像素和css的像素相等。