HTML meta标签小白学习记录！

META标签小白学习日记

刚刚接触HTML，对于其中部分的标签知识一个刚刚认识的阶段，或许会使用很小的一部份，但是，确实远没有达到理解的程度。meta就是其中之一。刚刚看见的哦时候完全没有办法理解，这东西有什么用啊！！！头大。下面展示我的学习成果，知识copy的，外加自己的一点见解吧。

1.初步了解：

引文：此处有内容引自W3school

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

总结：
meta标签位置是在Head标签之间的。他并不是描述当前的页面的显示信息的。而是用来告知浏览器当前网页的内容类型和编程人员对当前网页某些特性的设置信息的。

2.基本了解

引文：同上

name 属性：

name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。

"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：

<meta [code]name="keywords"

content="HTML,ASP,PHP,SQL">[/code]
如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

http-equiv 属性：

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：

<meta [code]http-equiv="charset"

content="iso-8859-1">
<meta

http-equiv="expires"

content="31 Dec 2008">
[/code]
这样发送到浏览器的头部就应该包含：

content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008

当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。

content 属性

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。

content 属性始终要和 name 属性或 http-equiv 属性一起使用。

总结：

meta标签属性，其中name和http-equiv都是用来定义名称/值对中的名称的，而在定义名称/值对中的名称呢个时候，就一定要content来定义的对应于名称的值。而name和http-equiv的差别就在于，name用于描述网页，而http-equiv主要是用于想浏览器传递信息，助于更好的显示。具体见如下：

3.深入了解

引文：此处文章引自freshlover的专栏

Meta标签的name属性语法格式：＜meta name="参数" content="具体参数值"＞

1. Keywords (关键字)

说明：告诉搜索引擎你网页的关键字是什么。

用法：<meta name="keywords" content="SEO优化,SEO优化教程,网站优化,搜索引擎优化教程">

2. Description (网页描述)

说明：Description用来告诉搜索引擎你的网页主要内容。

用法：<meta name="description" content="学习研究搜索引擎优化网提供专业的SEO优化教程，收集整理SEO优化文章、SEO优化工具，为网络营销贡献出自己的一份力量。" />

3. Robots (机器人向导)

说明：Robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。

用法：<meta name="robots" content="All|None|Index|Noindex|Follow|Nofollow">

all：文件将被检索，且页面上的链接可以被查询；

none：文件将不被检索，且页面上的链接不可以被查询；(和 "noindex, no follow" 起相同作用)

index：文件将被检索；（让robot/spider登录）

follow：页面上的链接可以被查询；

noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)

nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)

4. Author (作者)

说明：标注网页的作者或制作组

用法：<meta name="author" content="mycodewind，mycodewind@qq.com">

注意：Content可以是：你或你的制作组的名字,或Email

5. Copyright (版权)

说明：标注版权

用法：<meta name="copyright" content="本网站版权归CSDN所有">

6. Generator (编辑器)

说明：编辑器的说明

用法：<meta name="generator" content="PCDATA|FrontPage|">

注意：Content="你所用编辑器"

7. Revisit-after (重访)

说明：通知搜索引擎多少天访问一次

用法：<meta name="revisit-after" content="7 days" >

从IE9开始引入了固定网站功能，对用户来说这是一种只需在任务栏上单击图标即可直接访问网站的简单方式。固定网站还易于实现，仅需要非常少的代码。以下的元数据标签只在IE9+生效。如Windows Vista,Windows 7系统上。官方文档地址http://msdn.microsoft.com/zh-cn/library/ie/gg491732%28v=vs.85%29.aspx 。所有元素都是可选的。包括：



针对安装的元数据：下面的 meta 元素控制如何在“开始”菜单和 Windows 7 任务栏上创建固定站点快捷方式。 所有这些元素都是可选的，但是强烈建议对页面起始处、页面名称、更好的辅助或识别功能以及启动时的自定义大小具有更多控制。

安装元数据元素仅在用户固定网站时使用。此后，对这些值的更改将不会对固定网站造成任何影响。因此，以下 meta 元素有时候被称为“安装时”值：

application-name
msapplication-tooltip
msapplication-starturl
msapplication-window

运行时元数据：与安装时值不同，在用户每次启动固定网站时将读取以下元数据。因此，网站开发人员可使用这些值不断修改用户体验。控制对这些值的更改的最佳方法是在固定网站的起始 URL 中定义它们。

msapplication-navbutton-color
msapplication-task
msapplication-task-separator

8.application-name

说明："application-name" 元数据定义固定网站应用程序实例的名称。当光标悬停在 Windows 7 任务栏的固定网站按钮上时，此名称将出现在工具提示中。该应用程序名称还将附加到固定网站应用程序实例的窗口标题中。

用法：<meta name="application-name" content="8783手游网" />

9.msapplication-tooltip

说明："msapplication-tooltip" 元数据提供其他工具提示文本，当光标悬停在 Windows 的“开始”菜单中或桌面上的固定网站快捷方式上时，将会出现这些文本。

用法：<meta name="msapplication-tooltip" content="8783手游网" />

10.msapplication-starturl

说明："msapplication-starturl" 元数据包含应用程序的根 URL。起始 URL 可以是完全限定或相对于当前文档的。只允许 HTTP 和 HTTPS 协议。如果缺少此元素，则改为使用当前页的地址。

用法：<meta name="msapplication-starturl" content="./" />

补充："msapplication-starturl" 元数据创建你的网站的公共入口点。当存在此元数据时，固定网站会启动起始 URL 而不是最初拖动到任务栏的页面。更重要的是，起始页中声明的运行时元数据将在每次启动网站时重新定义导航按钮颜色和静态跳转列表任务。（有关详细信息，请参阅运行时元数据部分。）

作为如何使用 "msapplication-starturl" 的示例，请考虑一个提供多个类型的计算器仿真器的站点：一个具有标准布局，一个具有科学布局，一个具有统计函数。如果没有起始 URL，用户可能只将科学计算器固定到任务栏，从而无法轻松地访问集合中的其他计算器。通过添加起始 URL，网站开发人员可以声明网站的公共入口点。

<meta name="msapplication-starturl" content="./CalculatorHome.html" />

通过将安装时元数据添加到仿真程序页面，网站开发人员可控制用户访问网站的方式。通过在起始页中添加跳转列表元数据，网站开发人员可以更轻松地控制用户选择要使用的计算器样式的方式。有关详细信息，请参阅向跳转列表添加任务。

处理服务器重定向

如果你的起始 URL 重定向到其他网页，请确保声明提供给客户端的网页中的所有运行时元数据。如果服务器重定向到新路径，则你的起始 URL 必须包括该路径和结尾反斜杠 (/)。

例如，如果 "http://contoso.com/" 重定向至 "http://www.contoso.com/Home/"，则起始 URL 必须包括新路径和结尾反斜杠，如下所示：

<meta name="msapplication-starturl" content="http://www.contoso.com/Home/" />

OR

<meta name="msapplication-starturl" content="/Home/" />

11.msapplication-window

说明："msapplication-window" 元数据设置固定网站首次启动时的初始窗口大小。但是，如果用户调整了窗口大小，则再次启动固定网站时，该网站将保留新的尺寸。

下表说明了构成 meta 元素的 content 特性的两个部分。这两个部分都是必需的，且必须用分号隔开。

部分 说明

width 以像素表示的窗口宽度。最小值为 800。

height 以像素表示的窗口高度。最小值为 600。

用法：<meta name="msapplication-window" content="width=1024;height=768" />

12.msapplication-navbutton-color

说明："msapplication-navbutton-color" 元数据定义固定网站浏览器窗口中的“后退”和“前进”按钮的自定义颜色。任何命名颜色或十六进制颜色值均有效。有关颜色名称的完整列表，请参阅颜色表（访问http://msdn.microsoft.com/zh-cn/library/ie/ms531197%28v=vs.85%29.aspx）。

用法：<meta name="msapplication-navbutton-color" content="#FF3300" />

补充：如果没有此 meta 元素，则默认颜色将基于网站图标（即，favicon）的调色板。若要了解如何为你的网站选择自定义图标，请参阅自定义站点图标（访问http://msdn.microsoft.com/zh-cn/library/ie/gg491740%28v=vs.85%29.aspx）。

13.msapplication-task

说明：它能够将一个网站如同程序固定在 Windows Vista 和 Windows 7 的任务栏中，并且在点击图标后显示一个相关网站的列表。与其他网站元数据一样，可使用 meta 元素定义静态任务。下一个任务向跳转列表（访问http://msdn.microsoft.com/zh-cn/library/ie/gg491725%28v=vs.85%29.aspx）添加任务说明了如何执行此操作。

用法：<meta name="msapplication-task" content="name=8783手游网;action-uri=http://www.8783.com;icon-uri=../static/8783.ico" />

14.msapplication-task-separator

说明：将此元素放在各个任务之间，以便在跳转列表菜单中放置一条分隔线。如果有多条分隔线，则必须通过声明 content="[unique value]" 使每条分隔线都具有唯一性。

用法：

<meta name="msapplication-task" content="name=Latest HTMLGoodies Articles; action-uri=http://www.htmlgoodies.com/; icon-uri=http://www.htmlgoodies.com/Favicon.ico" />

<meta name="msapplication-task" content="name=HTML5 Development Center; action-uri= http://www.htmlgoodies.com/html5/; icon-uri=http://www.htmlgoodies.com/Favicon.ico" />

<meta name="msapplication-task-separator" content="Forum Tasks" />

<meta name="msapplication-task" content="name=HTML Discussion Forums; action-uri= http://www.webdeveloper.com/forum/forumdisplay.php?f=2; icon-uri=http://www.htmlgoodies.com/Favicon.ico" />

更多用例：

Bing.com的使用案例：

<meta content="Bing" name="application-name" />

<meta content="Bing" name="msapplication-tooltip" />

<meta content="width=1024;height=768" name="msapplication-window" />

<meta content="/" name="msapplication-starturl" />

BeautyoftheWeb.com的使用案例：

<meta name="application-name" content="Beauty Of The Web" />

<meta name="msapplication-tooltip" content="Start the Beauty Of The Web" />

<meta name="msapplication-starturl" content="http://www.beautyoftheweb.com/" />

<meta name="msapplication-navbutton-color" content="#5f6dbd" />

Facebook.com的使用案例：

<meta name="application-name" content="Facebook"/>

<meta name="msapplication-tooltip" content="Start the Facebook App"/>

<meta name="msapplication-starturl" content="/"/>

<meta name="msapplication-window" content="width=800;height=600"/>

2012年10月26日，微软发布了Windows8和Microsoft Surface及其默认的IE10，这次不仅增加了对大量HTML5、CSS3特性的支持，而且有一个非常方便用户的功能：固定站点。

Windows 8 通过在“开始”屏幕上使用磁贴来实现固定网站。当用户单击固定网站的磁贴时，该网站将在新 Windows UI 环境中在 Internet Explorer 10 中打开。你将在下面了解到如何在 Windows 8 中实现固定网站通知（访问http://msdn.microsoft.com/zh-cn/library/IE/hh880842%28v=vs.85%29.aspx）。

你必须提供以下几条信息以在 Windows 8 中正确实现固定网站通知：

轮询通知的 Web 服务的位置

反应当前锁屏提醒状态的最新 XML 文件

更新将发生的频率

以下元标签为Windows8/Microsoft Surface(IE10+)新引入的：

15.msapplication-TileImage

说明：在Windows 8上，我们可以将网站固定在开始屏幕上，而且支持个性化自定义色块icon和背景图片。这个标签是用来定义色块的背景图的。色块图应该为144*144像素的png格式图片，背景透明。

用法：<meta name="msapplication-TileImage" content="tile.png">

16.msapplication-TileColor

说明：同前一个元数据msapplication-TileImage类似，这个功能是用来设置颜色值，个性化自定义色块（磁贴）icon。颜色值应该设为logo的主色或者网站视觉的主色调颜色。CSS颜色值可以是16进制的形式（如#333333），命名形式（如red）或者CSS函数（如RGB），如果不设置颜色，IE将默认提取网站icon或色块背景图片的主色来显示为背景色。在IE内的历史检索和其他地方，也会用到这个默认色与icons。

用法：<meta name="msapplication-TileColor" content="#ef0303">

补充：在合并制作固定网站的icons图时，你仅仅需要在一个选定的背景色上放上白色或黑色的小icon图，不要使用色彩复杂的大图片来做。IE10的色块图尺寸144*144与高分辨率的iPad icon一致。不过，在不同的系统平台上使用同一个icon图时，要注意，因为不同系统平台对icon图的渲染呈现是不一样的。Internet Explorer 10将使用当前页面的标题用于磁贴名称。如果我们想定义一个不同的名称，可以使用title meta标签：<meta name="title" content="Tile title">



以下的17-21五个元标签是WINDOWS商店应用集成相关的功能：

17.msApplication-ID

说明：如果你有一款Windows商店应用你可以使用一些meta标签将你的网站与它联系起来。IE将会显示一个菜单让用户可以快速获得这个应用，如果用户还没有安装它的话。如果应用已经安装过了，菜单会变为“切换到xxx应用”。

其实这个特性与IOS6上的智能广告推送功能很相似。不过，微软是在Apple之前发布的这个特性。msApplication-ID为 必选项。定义在程序manifest中的id。

用法：<meta name="msApplication-ID" content="App"/>

18.msApplication-PackageFamilyName

说明： 必选项。Microsoft Visual Studio创建的用于标识应用的Package family。

用法：<meta name="msApplication-PackageFamilyName" content="ZeptoLabUKLimited.CutTheRope_sq9zxnwrk84pj"/>

19.msApplication-Arguments

说明：可选项。 要传递给你的应用的字符串。如果我们不定义这个meta信息，IE将自动传递当前的URL。

用法：<meta name="msApplication-Arguments" content="http://www.8783.com/gl/27647.shtml"/>

下面的代码片段显示了在使用 JavaScript 的 Windows 应用商店应用中如何处理此参数（更多用法访问http://msdn.microsoft.com/zh-cn/library/ie/hh781489%28v=vs.85%29.aspx）：

[javascript]
view plain
copy





// Function available in default.js file in Visual Studio templates provided
WinJS.Application.onmainwindowactivated = function (e) {
if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
// Insert this code to handle incoming argument when Internet Explorer launches the app
if (e.detail.arguments) {
// Parse the value of the msApplication-Arguments string
// Direct incoming user to relevant in-app content
}
}
}

20.msApplication-MinVersion

说明：可选项。 强制要求应用的最小版本号。因此，如果你的用户使用一个更旧的版本，要想切换到这个应用的话她会被要求到商店去更新它。

用法：<meta name="msApplication-MinVersion" content="V3.0 Build 20140308"/>

21.msApplication-OptOut

说明：可选项。 允许我们的HTML文档在一些情况不与应用相关联。要选的值有：install，它将阻止在用户没装应用的情况下提示安装应用；switch将阻止在用户已安装应用的情况下提示用户切换到应用。both，将阻止以上两种情况的提示。

用法：<meta name="msApplication-OptOut" content="install"/>

22. MSSmartTagsPreventParsing

说明：在Microsoft IE 6 中有一个 Smart tag 开关，如果您包含下面标记，访问这将看不到某些相关连接，这样可以避免访问者流失到竞争对手的网站上去。

用法：<meta name="MSSmartTagsPreventParsing" content="True" />

23.MSThemeCompatible

说明：是否在IE中关闭xp 的主题。<meta http-equiv="MSThemeCompatible" content="Yes" />表示打开xp 的蓝色立体按钮系统显示。

用法：<meta http-equiv=”MSThemeCompatible” Content="No">



24.msapplication-badge 元标记

说明：固定网站的新的元标记描述轮询 URL。Windows 8 可以轮询“开始”屏幕中固定图块的更新。这对于轻量级的通知，例如，来自其他用户（电子邮件和社交网站）的新消息、购物网站的最新折扣和新闻网站的最新报道等通知来说效果非常明显。使用 Internet Explorer 10 和 Windows 8，您可以直接在您的固定网站图块上提供徽章通知。这意味着无需在浏览器中打开网站即可看到这些网站的更新内容。例如，在 Windows 8 Consumer Preview 中使用 IE10 来固定 Fresh Tweet
演示。固定网站的图块将定期更新并将在出现新的 Tweet 时通知用户。背景通知需要网站提供的组件。这些组件包括：(1) 徽章通知 XML，描述 Windows 徽章通知的 XML 响应，以及 (2) 固定网站元标记，指向 Windows 轮询通知和轮询频率的位置的 Web 页面标记。

用法：

<meta name="msapplication-badge" content="frequency=30; polling-uri=http://mysite.com/id45453245/polling.xml"/>

名称值 "msapplication-badge" 是必需的，并指示当锁定到“开始”屏幕时网站支持锁屏提醒通知。

内容值 "frequency" 是可选的，并指示客户端应该检查轮询 URL 的更新的频率（每分钟）。受支持的值包括 30、60、360（6 小时）、720（12 小时）和 1440（1 天）。如果未指定任何值，则使用 1440 小时的默认值。

内容值 "polling-uri" 是必需的，并指示用于轮询 XML 数据文件的 URL。仅支持 "http" 和 "https" URI 方案。

锁屏提醒描述文件

锁屏提醒通知可以使用从 1 至 99 的数字或者 10 个标准标志符号之一来更新你的固定网站磁贴。有关锁屏提醒图像的图解列表，请参阅锁屏提醒图像目录（Windows 应用商店应用，访问http://msdn.microsoft.com/zh-CN/library/windows/apps/Hh761458.aspx）。在下面的 XML 示例中所描述的锁屏提醒指示收到了新消息。

Windows 处理徽章通知的轮询和提取。Windows 轮询描述固定网站图块视觉效果的徽章通知 XML。徽章 XML 架构定义这一简单的 XML 响应。例如，要使用数字锁屏提醒“3”来更新图块，您需要发送以下 XML：

<?xml version="1.0" encoding="utf-8" ?>

<badge value="3"/>

徽章可以是数字或字形（例如，“警报”和“新消息”指示器）。有关徽章可显示内容的全部列表，请参阅 MSDN 上的选择徽章图像（访问http://msdn.microsoft.com/zh-cn/library/windows/apps/hh761458.aspx）。

下面的 XML 添加了字形锁屏提醒。

<badge value="newMessage" />

有关 XML 值、标志符号和示例的完整描述，请参阅 Badge schema（访问http://msdn.microsoft.com/zh-CN/library/windows/apps/br212851.aspx）。

配置了徽章通知 XML文件后，按下来是将徽章通知 XML 与 Web 页面相关联。IE10 使用元标记 “application-name”来确定是否 Web 页面支持固定网站功能，如通知和跳转列表。要支持徽章通知，请将新的元标记添加到包含徽章通知 XML 的 URL 和 Windows 请求频率的标记语言中。IE 将检查在固定时和从固定网站图块后续启动网站时页面中是否存在“msApplication-badge”元标记。

<meta name="msapplication-badge" value="frequency=360;polling-uri=http://ietestdrive2.com/PinnedSites/TweetCounter/microsoft/360" />

值参加由两部分组成：polling-uri（强制部分）和 frequency（可选部分）。

polling-uri 是 Windows 用来请求上述简单 XML 文档的绝对 URI。

frequency 是两次更新之间的可选分钟数，其必须为下列值之一：

30（Windows 将每 30 分钟轮询一次 URI）

60（Windows 将每 60 分钟轮询一次 URI）

360（Windows 将每 6 小时轮询一次 URI）

360（Windows 将每 12 小时轮询一次 URI）

1440（Windows 将每天轮询一次 URL。该值为默认值。）

如果省略 frequency，或者它的值是不同于上述值的其他值，则默认设置为每天更新一次（1440 分钟）。

更新徽章通知的开发人员 API：

刷新锁屏提醒状态

Internet Explorer 10 引入了你可以根据需要用于请求 Windows 轮询固定网站的通知状态的JavaScript形式 API：window.external.msSiteModeRefreshBadge();例如，当用户积极地浏览你的网站时，你可能要更频繁地更新固定网站的通知锁屏提醒。 当网站被打开以刷新锁屏提醒状态时，你可能还要这样做。所以您可以使用此API从 Web 页面直接清除或刷新网站图块，以便确保网站图块的内容是最新的。

当用户通过“开始”屏幕启动固定网站时，Web 网站将在其自有的 SiteMode 会话中运行，并且可使用下列 JavaScript 函数更新徽章。

window.external.msSiteModeClearBadge() 可以清除图块上的徽章通知。在 Fresh Tweet 演示中，当用户收到通知并点击图块启动浏览器时，Web 页面将使用 msSiteModeClearBadge() 从图块上清除通知。这样，当下次图块上显示通知并亮起时，用户便可以意识到有了新内容。

window.external.msSiteModeRefreshBadge() 调用 Windows 来使用轮询 URI 更新网站徽章。例如，当用户看到固定网站图块显示存在三个未读消息并单击该图块返回网站时。如果他/她只阅读了第一个更新，则您可以触发更新以便徽章可以正确反映出已读/未读数量 2。

在 Windows 8 Consumer Preview 中，这两个 API 仅对在本地 Intranet 或受信任的站点区域中运行的网站有效。下一个预览版中将有效地解决该问题。要使用 Consumer Preview 在您的自有网站上测试这些 API，请使用 [Internet Properties]（Internet 属性）对话框中的 [Security]（安全）选项卡将该网站的域添加到受信任站点列表。

桌面任务栏通知

桌面任务栏中显示为图标叠加的固定网站通知将继续适用于桌面上的 Windows 8 和 IE10。Windows 8“开始”屏幕中的固定站点不存在这种通知。Windows 8 不仅可以处理“开始”屏幕中的所有图块的通知，而且可以节电模式来完成这些操作。

25.移动端viewport标签

[html]
view plain
copy





<meta name="viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
"
/>

含义如下：

width
控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height
和 width 相对应，指定视窗的高度。

target-densitydpi
一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。

下面是 target-densitydpi 属性的 取值范围

device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density.
low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
<value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。

为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放，你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展示。在这种情形下，你还需要将viewport的width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。

initial-scale
初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。

maximum-scale
最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。

user-scalable
用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。

所有的缩放值都必须在0.01–10的范围之内。

例：

(设置屏幕宽度为设备宽度，禁止用户手动调整缩放)

<meta name="viewport" content="width=device-width,user-scalable=no" />

(设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放)

<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

另外，iOS 7.1的Safari为meta标签新增minimal-ui属性，在网页加载时默认隐藏地址栏与导航栏

[html]
view plain
copy





<meta name="viewport" content="minimal-ui">

此时点击顶栏区域便能切换为显示地址栏、导航栏，再点击页面主体区域则又使之隐藏。

引文：此处内容引用自阔人的个人空间

1、name属性

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

标签的name属性语法格式是：

< name="参数"content="具体的参数值">。

其中name属性主要有以下几种参数：　

A、Keywords(关键字)　

说明：keywords用来告诉搜索引擎你网页的关键字是什么。

举例：< name="keywords" content="science,education,culture,politics,ecnomics，relationships,entertaiment,human">

B、de ion(网站内容描述)

说明：de ion用来告诉搜索引擎你的网站主要内容。

举例：< name="de ion"content="Thispageisaboutthemeaningofscience,education,culture.">

C、robots(机器人向导)

说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

content的参数有all,none,index,noindex,follow,nofollow。默认是all。

举例：< name="robots"content="none">

D、author(作者)

说明：标注网页的作者

举例：< name="author"content="root,root@xxxx.com">

2、http-equiv属性

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

标签的http-equiv属性语法格式是：

< http-equiv="参数"content="参数变量值">；

其中http-equiv属性主要有以下几种参数：

A、Expires(期限)

说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。

用法：< http-equiv="expires"content="Fri,12Jan200118:18:18GMT">

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

B、Pragma(cache模式)

说明：禁止浏览器从本地计算机的缓存中访问页面内容。

用法：< http-equiv="Pragma"content="no-cache">

注意：这样设定，访问者将无法脱机浏览。

C、Refresh(刷新)

说明：自动刷新并指向新页面。

用法：< http-equiv="Refresh"content="2;URL=http://www.herohome.net">(注意后面的引号，分别在秒数的前面和网址的后面)

注意：其中的2是指停留2秒钟后自动刷新到URL网址。

D、Set-Cookie(cookie设定)

说明：如果网页过期，那么存盘的cookie将被删除。

用法：< http-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">

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

E、Window-target(显示窗口的设定)

说明：强制页面在当前窗口以独立页面显示。

用法：< http-equiv="Window-target"content="_top">

注意：用来防止别人在框架里调用自己的页面。

F、content-Type(显示字符集的设定)

说明：设定页面使用的字符集。

用法：< http-equiv="content-Type"content="text/html;charset=gb2312">

G、content-Language（显示语言的设定）

用法：< http-equiv="Content-Language"content="zh-cn"/>

H、Cache-Control指定请求和响应遵循的缓存机制。

Cache- Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请 求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、on

ly-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下 ：
Public指示响应可被任何缓存区缓存
Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效
no-cache指示请求或响应消息不能缓存
no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应
min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应
max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息

有上面这些内容我们可以很容易理解meta的作用并且很好的利用之。