首页 > 代码库 > 最齐全的站点元数据meta标签的含义和使用方法

最齐全的站点元数据meta标签的含义和使用方法

2024-10-14 15:01:02   216人阅读

最齐全的站点元数据meta标签的含义和使用方法

随着HTML5的流行和Web技术的不断演变，Meta标签队伍也越来越壮大，从Windows XP的IE6到现在Windows 7、Windows 8的IE9、IE10、IE11，对Html5的支持越来越好。html meta标签的功能作用也越来越强大。

技术分享


首先。先说一下最初产生的一些经常使用meta标签。

从Meta标签的定义说起。



Meta标签是HTML语言中HEAD区的一个辅助性标签，它位于HTML文档头部的<head>标记 和<title>标记之间。它提供用户不可见的信息。META标签有两个重要的属性：HTTP标题信息(HTTP-EQUIV)和页面描写叙述信息(name)。

name属性是描写叙述网页的。相应于content（网页内容），以便于搜索引擎机器人查找、分类，眼下差点儿全部的搜索引擎都使用网上机器人自己主动查找meta值来给网页分类。

Meta标签的name属性语法格式：＜meta name="參数" content="详细參数值"＞

1. Keywords (keyword)
说明：告诉搜索引擎你网页的keyword是什么。
使用方法：<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 任务栏的固定站点button上时，此名称将出如今工具提示中。

该应用程序名称还将附加到固定站点应用程序实例的窗体标题中。
使用方法：<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 而不是最初拖动到任务栏的页面。更重要的是，起始页中声明的执行时元数据将在每次启动站点时又一次定义导航button颜色和静态跳转列表任务。（有关具体信息。请參阅执行时元数据部分。）

作为怎样使用 "msapplication-starturl" 的演示样例，请考虑一个提供多个类型的计算器仿真器的站点：一个具有标准布局，一个具有科学布局，一个具有统计函数。假设没有起始 URL，用户可能仅仅将科学计算器固定到任务栏，从而无法轻松地訪问集合中的其它计算器。通过加入起始 URL，站点开发者能够声明站点的公共入口点。

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

通过将安装时元数据加入到仿真程序页面，站点开发者可控制用户訪问站点的方式。

通过在起始页中加入跳转列表元数据，站点开发者能够更轻松地控制用户选择要使用的计算器样式的方式。

有关具体信息。请參阅向跳转列表加入任务。
处理server重定向

假设你的起始 URL 重定向到其它网页，请确保声明提供给client的网页中的全部执行时元数据。假设server重定向到新路径，则你的起始 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）：

// 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 的蓝色立体button系统显示。
使用方法：<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" 是可选的，并指示client应该检查轮询 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="http://www.mamicode.com/3"/>

徽章能够是数字或字形（比如。“警报”和“新消息”指示器）。

有关徽章可显示内容的所有列表，请參阅 MSDN 上的选择徽章图像（訪问http://msdn.microsoft.com/zh-cn/library/windows/apps/hh761458.aspx）。



以下的 XML 加入了字形锁屏提醒。



<badge value="http://www.mamicode.com/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="http://www.mamicode.com/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标签

<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属性，在网页载入时默认隐藏地址栏与导航栏

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

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



參考文章与扩展阅读：

《Windows 8 and Microsoft Surface: IE10 meets modern mobile HTML5》 http://www.mobilexweb.com/blog/windows-8-surface-ie10-html5

《Windows 8中的固定站点功能》http://www.iefans.net/windows8-gudingwangzhan/
《声明固定网站元数据》http://msdn.microsoft.com/zh-cn/library/ie/gg491732%28v=vs.85%29.aspx
《Page 3: Implementing Site Pinning with Internet Explorer 9 and Windows 7》http://www.htmlgoodies.com/html5/tutorials/page-3-implementing-site-pinning-with-internet-explorer-9-and-windows-7.html#fbid=e2FLjB06Ef_
《Windows Store Applications <meta /> Elements | HTML <meta> Elements
Standards Based Development》http://dev.bowdenweb.com/html/e/meta/windows-store-app-meta-elements.html






最齐全的站点元数据meta标签的含义和使用方法


联系
我们