01常用<meta>总结

meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的，它可以用于浏览器(显示内容/重新加载页面)，搜索引擎（关键字），或者其他web服务。

一、页面设置

<!-- 页面描述 -->
<meta name="description" content="页面描述，控制在150字以内" />

<!-- 页面关键词 -->
<meta name="keywords" content="关键字列表" />
用于准确描述页面内容的代表性词汇/短语，供搜索引擎搜索，标记不超过874个字符

<!-- 作者信息 -->
<meta name="author" content="basecss, i@basecss.net" />

<!-- 页面图标 -->
<link rel="shortcut icon" type="image/icon" href="icon.ico" />

<!-- 声明文档字符编码 -->
<meta charset="utf-8">

<!-- IE 兼容性设置 :用最新模式渲染，优先使用 chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />

<!-- 浏览器内核控制 -->
国内浏览器很多都是双内核（webkit和Trident），webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。
<meta name="renderer" content="webkit|ie-comp|ie-stand">

二、http信息设置

<!-- 内容语言 -->
<meta http-equiv="content-language" content="zh-CN" />

<!—页面刷新 -->
<meta http-equiv="refresh" content="10" />

<!—定时自动跳转 -->
<meta http-equiv="refresh" content="3; URL=http://www.baidu.com" />
数字代表多少秒后自动刷新，url是倒计时结束后打开的页面

<!-- 编码设置-->
<meta charset=“”UTF-8“” />
<meta http-equiv="content-type" content="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- 缓存信息 -->
<meta http-equiv="expires" content="GMT 格式时间" />

<!-- 禁止缓存 -->
<meta http-equiv="pragma" content="no-cache" />

<!-- 添加 cookie -->
<meta http-equiv="set-cookie" content="cookieName=cookieValue;expires=GMT 格式时间;path=/" />

<!-- 页面加载动画 -->

<meta http-equiv="page-enter" content="blandtrans(duration=0.5)" />

<!-- 页面退出动画 -->
<meta http-equiv="page-exit" content="revealtrans(duration=0.5,transtion=1)" />
<!-- ******************************
transtion 可以取0-23的整数，分别表示：
0.盒状收缩; 1.盒状展开; 2.圆形收缩; 3.圆形展开; 4.向上擦除;
5.向下擦除; 6.向左擦除; 7.向右擦除; 8.垂直百叶窗; 9.水平百叶窗;
10.纵向棋盘; 11.横向棋盘; 12.溶解; 13.左右向中间收缩; 14.中间向左右展开;
15.上下向中间收缩; 16.中间向上下展开; 17.阶梯向左下; 18.阶梯向左上;
19.阶梯向右下; 20.阶梯向右上; 21.水平随机线; 22.垂直随机线; 23.随机;
******************************* -->

<!-- 缓存控制 -->
<meta http-equiv="Cache-control" content="max-age=5" />
<!-- ******************************
public: 允许任何人缓存此页;
private: 不允许缓存服务器缓存此页;
no-cache: 相应不能被缓存;
no-stroe: 请求相应都不能被缓存;
max-age: 最大生存周期(秒);
min-fresh: 客户端愿意接受的最小缓存时长，缓存时间超过该值会要求向服务器查新;
max-stale: 接受超过缓存时限但不超过该值的数据;
******************************* -->

三、搜索引擎相关

<!-- 设置搜索引擎抓取间隔 -->

<meta name="visit-after" content="10 days">

<!-- ********搜索引擎抓取设置

<meta name="robots" content="index" /><!--允许搜索引擎抓取此页-->

<meta name="robots" content="noindex" /><!--不允许搜索引擎抓取此页-->

<meta name="robots" content="follow" /><!--允许搜索引擎抓取子页面-->

<meta name="robots" content="nofollow" /><!--允许搜索引擎抓取子页面-->

<meta name="robots" content="none" /><!--不允许抓取此页和子页面-->

<meta name="robots" content="all" /><!--允许抓取此页和子页面-->

******************************* -->

四、移动端相关

<!-- 为移动设备设置 viewport -->
<meta name="viewport" content="width=device-width,initial-scale=1, minium-scale=1, user-scalable=no" />
优化移动浏览器的显示。
** 如果不是响应式网站，不要使用initial-scale或者禁用缩放
** 大部分4.7-5寸设备的viewport宽设为360px；5.5寸设备设为400px；iphone6设为375px；ipone6 plus设为414px
** width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边
** 很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。
1. width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
2. height：高度（数值 / device-height）（范围从223 到10,000）
3. initial-scale：初始的缩放比例 （范围从>0 到10）
4. minimum-scale：允许用户缩放到的最小比例
5. maximum-scale：允许用户缩放到的最大比例
6. user-scalable：用户是否可以手动缩 (no,yes)

<!-- iOS 移动设备添加主屏幕标题设置 -->
添加到主屏后的标题
<meta name="apple-mobile-web-app-title" content="My App" />
<!-- 是否启用全屏模式 -->

启用webapp全屏模式，伪装APP，离线应用
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- 全屏时状态栏颜色设置 -->
只有开启webapp全屏模式时才生效
<meta name="apple-mobile-web-status-bar-style" content="black-translucent" />
- default
- black
- black-translucent

<!-- 禁用电话号码自动识别 -->
<meta name="format-detection" content="telephone=no" />

<!-- 禁用邮箱自动识别 -->
<meta name="format-detection" content="email=no" />

<!-- 忽略页面的数字为电话，忽略email识别 -->
<meta name="format-detection" content="telephone=no, email=no"/>

<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）, 默认禁用 -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" />

五、ios相关

<!-- 关闭ios键盘首字母自动大写 -->
<input type=”text” autocapitalize=”off” />

/* *************启动画面************* */

<!-- iPad 竖屏 768 x 1004（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />

<!-- iPad 竖屏 1536x2008（Retina） -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" />

<!-- iPad 横屏 1024x748（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" />

<!-- iPad 横屏 2048x1496（Retina） -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" />

<!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" />

<!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" />

<!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" />

/* *************ios图标************* */

<!-- 非视网膜 iPhone 低于 iOS 7 -->
<link rel="apple-touch-icon" href="icon57.png" sizes="57x57" />

<!-- 非视网膜 iPad 低于 iOS 7 -->
<link rel="apple-touch-icon" href="icon72.png" sizes="72x72" />

<!-- 非视网膜 iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon76.png" sizes="76x76" />

<!-- 视网膜 iPhone 低于 iOS 7 -->
<link rel="apple-touch-icon" href="icon114.png" sizes="114x114" />

<!-- 视网膜 iPhone iOS 7 -->
<link rel="apple-touch-icon" href="icon120.png" sizes="120x120" />

<!-- 视网膜 iPad 低于 iOS 7 -->
<link rel="apple-touch-icon" href="icon144.png" sizes="144x144" />

<!-- 视网膜 iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon152.png" sizes="152x152" />

六、其他

<!-- Windows 8 磁贴颜色 -->

<meta name="msapplication-TileColor" content="#000"/>

<!-- Windows 8 磁贴图标 -->

<meta name="msapplication-TileImage" content="icon.png"/>

<!-- Android 启动图标 -->

<link rel="shortcut icon" sizes="128x128" href="icon.png" />

<!-- 添加 RSS 订阅 -->

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />

<!-- 添加 favicon icon -->

<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />