meta标签

meta标签

1.分类

• 定义网页的字符集
• HTTP标题信息（http-equiv）
• 页面描述信息（name）

1.2 定义字符集

<meta  charset="utf-8" >

1.2 http-equiv

• Content-Type

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

• X-UA-Compatible
• expires：设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。

<meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT">

注意：必须使用GMT的时间格式。

• Pragma：设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出。属性值：

<meta http-equiv="pragma" content="no-cache" />

• refresh:自动刷新并制定新的页面

<meta http-equiv="refresh" content="3; url=http://www.net.cn" /> //停留2秒自动刷新到URL网址

• set-cookie:设置cookie的过期时间

<meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT； path=/">

• keywords:设置网页关键字

<meta http-equiv="keyword" content="百度" />

• description:设置网页描述

<meta http-equiv="description" content="这是百度页面" />

• cache-control。属性值：
  • public: 所有内容都将被缓存(客户端和代理服务器都可缓存)
  • private: 内容只缓存到私有缓存中(仅客户端可以缓存，代理服务器不可缓存)
  • no-cache:
  • no-store:

<meta http-equiv="cache-control" content="no-cache" />

• content-language: 响应体语言。

<meta http-equiv="content-language" content="en-US">

1.2 name

• viewport，其属性值：
  • widthviewport的宽度(200~10000, 默认是980px)
  • heightviewport的高度(223~10000)
  • initial-scale初始的缩放比例(0~10)
  • minimum-scale允许用户缩放的最小比例
  • maximun-scale允许用户缩放的最大比例
  • user-scalable用户是否可以手动缩放（yes/no）

<mate name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable="no" >

注意：某些安卓机自带支持情况，页面进行放大； 解决方案：定义页面的最小宽度

body{
    min-width:320px;
}

• format-detection(忽略页面中的数字识别为电话号码)

<meta name="format-detection" content="telephone=no" />

• apple-mobile-web-app-status-bar-style（改变顶部状态条的颜色）

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

说明：

• 在 web app 应用下状态条（屏幕顶部条）的颜色；
• 默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）

注意：注意：若值为“black-translucent”将会占据页面位置，浮在页面上方（会覆盖页面 20px 高度 iphone4 和 itouch4 的 Retina 屏幕为 40px ）