必须属性
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标签就是告诉浏览器, 不要在移动端显示的时候缩放.