一、大众机型常用meta标签name的设置

1、name之viewport

<meta name="viewport" content="">

说明：屏幕的缩放

content的几个属性：

width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值，大部分的安卓手机不支持，但是ios支持；

height – viewport 的高度 （范围从 223 到 10,000 ）

user-scalable [yes | no]是否允许缩放

initial-scale [数值] 初始化比例（范围从 > 0 到 10）

minimum-scale [数值] 允许缩放的最小比例

maximum-scale [数值] 允许缩放的最大比例

target-densitydpi 值有以下（一般推荐设置中等响度密度或者低像素密度，后者设置具体的值dpi_value，另外webkit内核已不准备再支持此属性）

-- dpi_value 一般是70-400//没英寸像素点的个数

-- device-dpi设备默认像素密度

-- high-dpi 高像素密度

-- medium-dpi 中等像素密度

-- low-dpi 低像素密度

完整案例：

[html]view plaincopyprint?<metaname="viewport"content="width=device-width,height=device-height,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1,target-densitydpi=device-dpi">

2、name之format-detection忽略电话号码和邮箱

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

说明：忽略页面中的数字识别为电话号码

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

说明：忽略页面中的邮箱格式为邮箱

也可以写成：

[html]view plaincopyprint?<metaname="format-detection"content="telphone=no,email=no"/>

3、name之设置作者姓名及联系方式

说明：设置作者姓名及联系方式

<meta name="author" contect="name, xxx@" />

4、其他

<!-- 声明文档使用的字符编码 -->

<meta charset='utf-8'>

<!-- 优先使用 IE 最新版本和 Chrome -->

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

<!-- 页面描述 -->

<meta name="description" content="不超过150个字符"/>

<!-- 页面关键词 -->

<meta name="keywords" content=""/>

<!-- 搜索引擎抓取 -->

<meta name="robots" content="index,follow"/>

<!-- 启用360浏览器的极速模式(webkit) -->

<meta name="renderer" content="webkit">

<!-- 避免IE使用兼容模式 -->

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 不让百度转码 -->

<meta http-equiv="Cache-Control" content="no-siteapp" />

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->

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

<!-- 微软的老式浏览器 -->

<meta name="MobileOptimized" content="320">

<!-- uc强制竖屏 -->

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

<!-- QQ强制竖屏 -->

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

<!-- UC强制全屏 -->

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

<!-- QQ强制全屏 -->

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

<!-- UC应用模式 -->

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

<!-- QQ应用模式 -->

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

<!-- 添加 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"/>

<!-- sns 社交标签 begin -->

<!-- 参考微博API -->

<meta property="og:type" content="类型" />

<meta property="og:url" content="URL地址" />

<meta property="og:title" content="标题" />

<meta property="og:image" content="图片" />

<meta property="og:description" content="描述" />

<!-- sns 社交标签 end -->

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

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

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

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

<!-- windows phone 点击无高光 -->

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

二、ios系统的meta/link设置：

1、开启对web app程序的支持

<meta name="apple-mobile-web-app-capable" content="yes">

说明：

网站开启对web app程序的支持，其实意思就是删除默认的苹果工具栏和菜单栏，开启全屏显示

2、改变顶部状态条的颜色；

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

说明：

在 web app 应用下状态条（屏幕顶部条）的颜色；

默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）；

3、设置“添加到主屏幕图标

Safari 浏览器有一个“添加到主屏幕”的功能，用户可以像保存书签一样把一个网站添加到主屏幕，下次用户直接点击主屏幕上的图标就能进入网站。

这个功能不仅方便用户快速访问我们的网站，而且也使我们的 WebApp 更像一个原生应用

因为 iOS 分辨率，所以 icon.png 图片的尺寸也各不相同，我们可以通过sizes属性来分别定义，iOS 系统会自动获取向匹配的图片：

[html]view plaincopyprint?<spanstyle="font-size:14px;"><!--iOS图标begin--> <linkrel="apple-touch-icon-precomposed"href="/apple-touch-icon-57x57-precomposed.png"/> <!--iPhone和iTouch，默认57x57像素，必须有--> <linkrel="apple-touch-icon-precomposed"sizes="114x114"href="/apple-touch-icon-114x114-precomposed.png"/> <!--RetinaiPhone和RetinaiTouch，114x114像素，可以没有，但推荐有--> <linkrel="apple-touch-icon-precomposed"sizes="144x144"href="/apple-touch-icon-144x144-precomposed.png"/> <!--RetinaiPad，144x144像素，可以没有，但推荐有--> <!--iOS图标end--></span>

扩展：

为用户加上提示

通过添加一个JavaScript代码来邀请用户添加到主屏幕，该库使用了HTML5的本地存储跟踪是否已经显示过了，以避免重复出现。

目前使用比较多和有在更新的一个库来自这里：/add-to-home-screen

4、设置桌面图标的标题，

为了在主屏达到最好的显示效果，title最好限制在六个中文长度内，超长的内容会被隐藏：

添加到主屏后的标题（iOS 6 新增）

[html]view plaincopyprint?<spanstyle="font-size:14px;"><metaname="apple-mobile-web-app-title"content="标题"></span>

5、设置启动画面

当用户点击主屏图标打开 WebApp 时，系统会展示启动画面，在未设置情况下系统会默认显示该网站的首页截图，当然这个体验不是很好，所以我们需要通过以下代码来自定义启动画面：

[html]view plaincopyprint?<linkrel="apple-touch-startup-image"href="Startup.png"/>

根据 iOS 设备的分辨率，其启动画面的图片尺寸也各不相同所以：

[html]view plaincopyprint?<!--iOS启动画面begin--> <linkrel="apple-touch-startup-image"sizes="768x1004"href="/splash-screen-768x1004.png"/> <!--iPad竖屏768x1004（标准分辨率）--> <linkrel="apple-touch-startup-image"sizes="1536x"href="/splash-screen-1536x.png"/> <!--iPad竖屏1536x（Retina）--> <linkrel="apple-touch-startup-image"sizes="1024x748"href="/Default-Portrait-1024x748.png"/> <!--iPad横屏1024x748（标准分辨率）--> <linkrel="apple-touch-startup-image"sizes="2048x1496"href="/splash-screen-2048x1496.png"/> <!--iPad横屏2048x1496（Retina）--> <linkrel="apple-touch-startup-image"href="/splash-screen-320x480.png"/> <!--iPhone/iPodTouch竖屏320x480(标准分辨率)--> <linkrel="apple-touch-startup-image"sizes="640x960"href="/splash-screen-640x960.png"/> <!--iPhone/iPodTouch竖屏640x960(Retina)--> <linkrel="apple-touch-startup-image"sizes="640x1136"href="/splash-screen-640x1136.png"/> <!--iPhone5/iPodTouch5竖屏640x1136(Retina)--> <!--iOS启动画面end--> 或者以下代码，具体没有实践，还需考证[html]view plaincopyprint?<!!--iPhoneSPLASHSCREEN--> <!linkhref="/html/"apple-touch-startup-image-320x460.png"media="(device-width:320px)"rel="apple-touch-startup-image"/> <!!--iPhone(Retina)SPLASHSCREEN--> <!linkhref="apple-touch-startup-image-640x920.png"media="(device-width:320px)and(-webkit-device-pixel-ratio:2)"rel="apple-touch-startup-image"/> <!!--iPad(portrait)SPLASHSCREEN--> <!linkhref="apple-touch-startup-image-768x1004.png"media="(device-width:768px)and(orientation:portrait)"rel="apple-touch-startup-image"/> <!!--iPad(landscape)SPLASHSCREEN--> <!linkhref="apple-touch-startup-image-748x1024.png"media="(device-width:768px)and(orientation:landscape)"rel="apple-touch-startup-image"/> <!!--iPad(Retina,portrait)SPLASHSCREEN--> <!linkhref="apple-touch-startup-image-1536x.png"media="(device-width:1536px)and(orientation:portrait)and(-webkit-device-pixel-ratio:2)"rel="apple-touch-startup-image"/> <!!--iPad(Retina,landscape)SPLASHSCREEN--> <linkhref="apple-touch-startup-image-1496x2048.png"media="(device-width:1536px)and(orientation:landscape)and(-webkit-device-pixel-ratio:2)"rel="apple-touch-startup-image"/>

6、 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）

[html]view plaincopyprint?<metaname="apple-itunes-app"content="app-id=myAppStoreID,affiliate-data=myAffiliateData,app-argument=myURL">

==================

比较常用的meta

以下代码参考网址：view-source:三个w点adinnet点cn斜杠service斜杠3d点html

[html]view plaincopyprint?<!--[ifltIE7]><htmlclass="oldieieie6"><![endif]--> <!--[ifIE7]><htmlclass="oldieieie7"><![endif]--> <!--[ifIE8]><htmlclass="ieie8"><![endif]--> <!--[if(gteIE9)|!(IE)]><!--><html><!--<![endif]--> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"> <title></title> <metaname="keywords"content=""/> <metaname="description"content=""/> <metaname="title"content=""/> <metaname="author"content="-06"/> <metaname="Copyright"content=""/> <!--让IE浏览器用最高级内核渲染页面还有用Chrome框架的页面用webkit内核 ==================================================--> <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"> <!--IOS6全屏Chrome高版本全屏 ==================================================--> <metaname="apple-mobile-web-app-capable"content="yes"> <metaname="mobile-web-app-capable"content="yes"> <!--让360双核浏览器用webkit内核渲染页面 ==================================================--> <metaname="renderer"content="webkit"> <!--MobileSpecificMetas ==================================================--> <!--!!!注意minimal-ui是IOS7.1的新属性，最小化浏览器UI--> <metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui"> <metaname="format-detection"content="telephone=no"> <!--CSS ==================================================--> <linkhref="/css/reset.css"rel="stylesheet"type="text/css"> <linkhref="/css/magicwall.css"rel="stylesheet"type="text/css"> <linkhref="/css/jquery.gridster.css"rel="stylesheet"type="text/css"> <linkhref="/css/case.css"rel="stylesheet"type="text/css"> <linkhref="/css/case_1280.css"rel="stylesheet"type="text/css"> <linkhref="/css/case_1024.css"rel="stylesheet"type="text/css"> <linkhref="/css/case_640.css"rel="stylesheet"type="text/css"> <linkhref="/css/case_320.css"rel="stylesheet"type="text/css"> <linkhref="/css/style_retina.css"rel="stylesheet"type="text/css"> <!--[ifltIE9]> <scriptsrc="/html5shiv/r29/html5.js"></script> <![endif]--> <!--Favicons ==================================================--> <linkrel="shortcuticon"href="favicon.ico"> <!--Android主屏图标 ==================================================--> <linkrel="icon"sizes="196x196"href="/images/apple-touch-icon-152x152.png"> <!--IOS主屏图标 ==================================================--> <linkrel="apple-touch-icon-precomposed"href="/images/apple-touch-icon-76x76.png"> <linkrel="apple-touch-icon-precomposed"sizes="76x76"href="/images/apple-touch-icon-76x76.png"> <linkrel="apple-touch-icon-precomposed"sizes="120x120"href="/images/apple-touch-icon-120x120.png"> <linkrel="apple-touch-icon-precomposed"sizes="152x152"href="/images/apple-touch-icon-152x152.png"> <linkrel="apple-touch-startup-image"href="/startup-748x1024.jpg" media="screenand(min-device-width:481px)and(max-device-width:1024px)and(orientation:landscape)"> <linkrel="apple-touch-startup-image"href="/startup-768x1004.jpg" media="screenand(min-device-width:481px)and(max-device-width:1024px)and(orientation:portrait)"> 或者说[html]view plaincopyprint?<!--启用360浏览器的极速模式(webkit)--> <metaname="renderer"content="webkit"> <!--避免IE使用兼容模式--> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <!--针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓--> <metaname="HandheldFriendly"content="true"> <!--微软的老式浏览器--> <metaname="MobileOptimized"content="320"> <!--uc强制竖屏--> <metaname="screen-orientation"content="portrait"> <!--QQ强制竖屏--> <metaname="x5-orientation"content="portrait"> <!--UC强制全屏--> <metaname="full-screen"content="yes"> <!--QQ强制全屏--> <metaname="x5-fullscreen"content="true"> <!--UC应用模式--> <metaname="browsermode"content="application"> <!--QQ应用模式--> <metaname="x5-page-mode"content="app"> <!--windowsphone点击无高光--> <metaname="msapplication-tap-highlight"content="no"> 整理====

meta属性在HTML中占据了很重要的位置。如：针对搜索引擎的SEO，文档的字符编码，设置刷新缓存等。虽然一些网页可能没有使用meta，但是作为正规军，我们还是有必要了解一些meta的属性，并且能够熟练使用它们。

1、声明文档使用的字符编码

[html]view plaincopyprint?<metacharset='utf-8'> 2、声明文档的兼容模式

[html]view plaincopyprint?<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>指示IE以目前可用的最高模式显示内容 <metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7"/>指示IE使用<!DOCTYPE>指令确定如何呈现内容。标准模式指令以IE7标准模式显示，而Quirks模式指令以IE5模式显示。 3、SEO 优化[html]view plaincopyprint?<metaname="description"content="不超过150个字符"/>页面描述 <metaname="keywords"content="html5,css3,关键字"/>页面关键词 <metaname="author"content="魔法小栈"/>定义网页作者 <metaname="robots"content="index,follow"/>定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 4、为移动设备添加 viewport

[html]view plaincopyprint?<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"> content参数解释： widthviewport宽度(数值/device-width) heightviewport高度(数值/device-height) initial-scale初始缩放比例 maximum-scale最大缩放比例 minimum-scale最小缩放比例 user-scalable是否允许用户缩放(yes/no) minimal-uiiOS7.1beta2中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写： <metaname="viewport"content="width=device-width,initial-scale=1,minimal-ui"> 5、iOS 设备[html]view plaincopyprint?<metaname="apple-mobile-web-app-title"content="标题">添加到主屏后的标题（iOS6新增） <metaname="apple-mobile-web-app-capable"content="yes"/>是否启用WebApp全屏模式 <metaname="apple-mobile-web-app-status-bar-style"content="black-translucent"/>设置状态栏的背景颜色 只有在"apple-mobile-web-app-capable"content="yes"时生效 content参数： default默认值。 black状态栏背景是黑色。 black-translucent状态栏背景是黑色半透明。 设置为default或black,网页内容从状态栏底部开始。 设置为black-translucent,网页内容充满整个屏幕，顶部会被状态栏遮挡。 6、iOS 图标 rel 参数[html]view plaincopyprint?apple-touch-icon图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed禁止系统自动添加效果，直接显示设计原图。 <linkrel="apple-touch-icon-precomposed"href="/apple-touch-icon-57x57-precomposed.png"/>iPhone和iTouch，默认57x57像素，必须有 <linkrel="apple-touch-icon-precomposed"sizes="72x72"href="/apple-touch-icon-72x72-precomposed.png"/>iPad，72x72像素，可以没有，但推荐有 <linkrel="apple-touch-icon-precomposed"sizes="114x114"href="/apple-touch-icon-114x114-precomposed.png"/>RetinaiPhone和RetinaiTouch，114x114像素，可以没有，但推荐有 <linkrel="apple-touch-icon-precomposed"sizes="144x144"href="/apple-touch-icon-144x144-precomposed.png"/>RetinaiPad，144x144像素，可以没有，推荐大家使用 <metaname="apple-mobile-web-app-title"content="标题">title最好限制在六个中文长度内，超长的内容会被隐藏，添加到主屏后的标题（iOS6新增） 7、iOS 启动画面[html]view plaincopyprint?iPad的启动画面是不包括状态栏区域的。 iPad竖屏768x1004（标准分辨率） <linkrel="apple-touch-startup-image"sizes="768x1004"href="/splash-screen-768x1004.png"/>iPad竖屏1536x（Retina） <linkrel="apple-touch-startup-image"sizes="1536x"href="/splash-screen-1536x.png"/>iPad横屏1024x748（标准分辨率） <linkrel="apple-touch-startup-image"sizes="1024x748"href="/Default-Portrait-1024x748.png"/>iPad横屏2048x1496（Retina） <linkrel="apple-touch-startup-image"sizes="2048x1496"href="/splash-screen-2048x1496.png"/> iPhone和iPodtouch的启动画面是包含状态栏区域的。 iPhone/iPodTouch竖屏320x480(标准分辨率) <linkrel="apple-touch-startup-image"href="/splash-screen-320x480.png"/>iPhone/iPodTouch竖屏640x960(Retina) <linkrel="apple-touch-startup-image"sizes="640x960"href="/splash-screen-640x960.png"/>iPhone5/iPodTouch5竖屏640x1136(Retina) <linkrel="apple-touch-startup-image"sizes="640x1136"href="/splash-screen-640x1136.png"/> <linkrel="apple-touch-startup-image"href="Startup.png"/>当用户点击主屏图标打开WebApp时，系统会展示启动画面，在未设置情况下系统会默认显示该网站的首页截图，当然这个体验不是很好 8、Windows 8[html]view plaincopyprint?<metaname="msapplication-TileColor"content="#000"/>Windows8磁贴颜色 <metaname="msapplication-TileImage"content="icon.png"/>Windows8磁贴图标 9、不常用的[html]view plaincopyprint?<linkrel="alternate"type="application/rss+xml"title="RSS"href="/rss.xml"/>添加RSS订阅 <linkrel="shortcuticon"type="image/ico"href="/favicon.ico"/>添加faviconicon <metaname="format-detection"content="telephone=no"/>禁止数字识自动别为电话号码 <metaname="format-detection"content="email=no"/>不让android识别邮箱 <metaname="renderer"content="webkit">启用360浏览器的极速模式(webkit) <metahttp-equiv="X-UA-Compatible"content="IE=edge">避免IE使用兼容模式 <metaname="HandheldFriendly"content="true">针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 <metaname="MobileOptimized"content="320">微软的老式浏览器 <metaname="x5-orientation"content="portrait">QQ强制竖屏 <metaname="full-screen"content="yes">UC强制全屏 <metaname="x5-fullscreen"content="true">QQ强制全屏 <metaname="browsermode"content="application">UC应用模式 <metaname="x5-page-mode"content="app">QQ应用模式 <metahttp-equiv="Cache-Control"content="no-siteapp"/>禁止百度转码 <metaname="msapplication-tap-highlight"content="no">windowsphone点击无高光 <metaname="keywords"content=""/>关键字 <metaname="description"content=""/>描述 <metaname="title"content=""/>标题 <metaname="author"content="-06"/>作者 <metaname="Copyright"content=""/>公司 <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">让IE浏览器用最高级内核渲染页面还有用Chrome框架的页面用webkit内核 <metaname="apple-mobile-web-app-capable"content="yes">IOS6全屏 <metaname="mobile-web-app-capable"content="yes">Chrome高版本全屏 <metaname="renderer"content="webkit">让360双核浏览器用webkit内核渲染页面 <metaname="apple-itunes-app"content="app-id=myAppStoreID,affiliate-data=myAffiliateData,app-argument=myURL">添加智能App广告条SmartAppBanner（iOS6+Safari） 10、sns 社交标签

参考微博API[html]view plaincopyprint?<metaproperty="og:type"content="类型"/> <metaproperty="og:url"content="URL地址"/> <metaproperty="og:title"content="标题"/> <metaproperty="og:image"content="图片"/> <metaproperty="og:description"content="描述"/>

条件注释判断IE浏览器，<!--[if IE]>条件注释区分非IE浏览器

文章同步我的另外的博客：/html5_meta_link_quan_jie_du.htmlhtml5 meta全解