meta标签

必须属性

content：定义与 http-equiv 或 name 属性相关的元信息。

可选属性

http-equiv：把 content 属性关联到 HTTP 头部。
可选值：

• content-type
• expires
• refresh
• set-cookie
  eg：使用带有 http-equiv 属性的 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

这样发送到浏览器的头部就应该包含：
content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008

name:把 content 属性关联到一个名称。
可选值：

• author
• description
• keywords
• generator
• revised
• others

meta viewport设置移动端自适应

viewport是浏览器展示网页的可视区域。有三种视口。

第一种是layout viewport他是浏览器的默认布局（默认宽度为980px）。可以通过document.documentElement.clientWidth来获取。

第二种是visual viewport，layout viewport的宽度会大于浏览器的可视区域的宽度。所以我们为移动设备浏览器可视区域设定了viewport。可以通过document.documentElement.innerWidth来获取可视区域的宽度。

第三种是ideal viewport，它是网页的最完美适配移动设备的viewport。首先，不需要缩放和横向滚动条就能正常查看网站的所有内容；其次，显示的文字、图片大小合适，如14px的文字不会因为在一个高密度像素的屏幕里显示得太小而无法看清，无论是在何种密度屏幕，何种分辨率下，显示出来的大小都差不多。

移动设备默认的viewport是layout viewport，，但在进行移动设备网站的开发时，需要的是ideal viewport。要得到ideal viewport，需要用到meta标签。

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

width：表示移动设设备下显示的宽度为设备宽度(device-width)，值为一个正整数或者字符串 device-width。

height：表示移动设设备下显示的宽度为设备宽度，值一个正整数或者字符串 device-height。

user-scalable：表示用户缩放能力, no表示不允许，值为一个布尔值（yes 或者no）。

initial-scale：表示设备与视口的缩放比率，值为一个0.0 到10.0之间的正数。

maximum、minimum分：别表示缩放的最大最小值, 要注意的是, maximum必须必minimum大，值为一个0.0 到10.0之间的正数。

上面的meta标签就是告诉浏览器, 不要在移动端显示的时候缩放.