meta标签的各种使用技巧

一、http-equiv

1.Content-Type（内容类型）

告诉浏览器当前访问的资源类型 并声明编码

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

2.refresh（重定向）

重定向（以下示例5秒后会跳转到：http://baidu.com）

<meta http-equiv="refresh" content="5;url="http://baidu.com" />

3.Set-Cookie（cookie设定）

网页过期则cookie将会被删除(必须是GMT的时间格式)

<meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday,21-Oct-98 16:14:21 GMT;path=/">

4.WINdow-target（窗口设置）

强制页面在当前窗口以独立页面显示----用来防止别人在框架里面调用你的页面

<meta http-equiv="Window-target" content="_top">

5.expires(期限)

用于设定网页的到期时间，一旦网页过期，必须到服务器上重新调阅(必须使用GMT的时间格式)

<meta http-equiv="expires" content="Wed, 26 Feb 2016 08:21:57GMT">

6.Pragma(cache模式)

禁止浏览器从本地机的缓存中调阅页面内容(访问者无法脱机浏览)

<meta http-equiv="Pragma" content="no-cache">

二、name

1.keywords

页面的关键字，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开

<meta name="keywords" content="HTML,CSS,JAVASCRIPT,PHP">

2.description

页面的描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开

<meta name="description" content="html meta标签大全,整理一下加强记忆">

3.robots(机器人向导)

robots用来告诉搜索机器人，哪些页面需要索引，哪些不需要。
用来阻止搜索引擎获取拷贝页面、私密页面和未完成的页面。

<meta name="robots" content="none">

content：
  all：默认值，文件将被检索，且页面上的链接可以被查询；
  none：文件将不被检索，且页面上的链接不可以被查询；
  index：文件将被检索；
  follow：页面上的链接可以被查询；
  noindex：文件将不被检索；
  nofollow：页面上的链接不可以被查询。

4.author(作者)

标注网页的作者

<meta name="author" content="johnson">

content：

自定义：自定义的作者名；
  notranslate：让Google不提供一个翻译链接；

4.viewport(视口)

针对移动端视口进行宽高和缩放的设置

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

content：
  width 宽度(数值/device-width)
  height 高度(数值/device-height)
  initial-scale 初始缩放比例
  maximum-scale 最大缩放比例
  minimum-scale 最小缩放比例
  user-scalable 是否允许用户缩放(yes/no)

<blockquote>
PS：部分老浏览器不支持 viewport，使用如下 meta 对其进行设备优化
</blockquote>

<meta name="HandheldFriendly" content="true">

5.format-detection（禁止默认）

禁止将文本提示为手机号、邮箱、地图链接，否则点击文本将触发默认事件

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

content：
  telephone=no 禁止将文本提示为手机号码
  email=no 禁止将文本提示为邮箱地址
  adress=no 禁止将文本提示为地图链接

6.msapplication-tap-highlight（禁止链接高亮）

禁止链接高亮

<meta name="msapplication-tap-highlight" content="no">

content：
  （yes | no）

7.apple-mobile-web-app-title（添加到主屏后的标题）

添加到主屏后的标题

<meta name="apple-mobile-web-app-title" content="标题" />

content：
  自定义标题

8.工具栏设置

设置工具栏的颜色、透明度

<meta name="apple-mobile-web-app-capable" content="yes" /> // webapp全屏模式
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> // 在 apple-mobile-web-app-capable 为 yes 的前提下进行设置

apple-mobile-web-app-status-bar-style
content：
  default 默认值，网页内容从状态栏底部开始
  black 状态栏背景是黑色，网页内容从状态栏底部开始
  black-translucent 状态栏背景是黑色半透明，网页内容充满整个屏幕，顶部会被状态栏遮挡

9.UC浏览器设置

uc强制竖屏

<meta name="screen-orientation" content="portrait">

UC缩放不出滚动条

<meta name="viewport" content="uc-fitscreen=no|yes"/>

UC强制全屏

<meta name="full-screen" content="yes">

UC强制图片显示：UC浏览器为了节省流量，为用户提供了无图模式，但是如果页面的图片是必不可少的，如验证码的，需要强制浏览器显示图片，可以设置imagemode， 不影响子页面。

<meta name="imagemode" content="force"/> // 对该页面全部图片设置
<img src="" show="force"> // 对单个图片的设置

UC应用模式：默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。

<meta name="browsermode" content="application"/>

10.QQ浏览器设置

QQ强制屏幕方向：portrait 竖屏，landscape 横屏

<meta name="x5-orientation" content="portrait|landscape" />

QQ强制全屏

<meta name="x5-fullscreen" content="true" />

QQ应用模式

<meta name="x5-page-mode" content="app" />

三、PC端常用

<!-- 使用 IE 标准模式渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 强制 IE 使用 Chrome Frame 渲染 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<!-- 360 浏览器 -->
<meta name="renderer" content="webkit"> // 默认webkit内核
<meta name="renderer" content="ie-comp"> // 默认IE兼容模式
<meta name="renderer" content="ie-stand"> // 默认IE标准模式

四、移动端常用

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, minimum-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="adress=no">
<meta name="screen-orientation" content="portrait">
<meta name="x5-fullscreen" content="true" />