最齊全的網站元數據meta標籤的含義和用法

時間 2019-11-26

原文原文鏈接

隨着HTML5的流行和Web技術的不斷演變，Meta標籤隊伍也愈來愈壯大，從Windows XP的IE6到現在Windows 七、Windows 8的IE九、IE十、IE11，對Html5的支持愈來愈好，html meta標籤的功能做用也愈來愈強大。javascript

首先，先說一下最初產生的一些經常使用meta標籤。從Meta標籤的定義提及。php

Meta標籤是HTML語言中HEAD區的一個輔助性標籤，它位於HTML文檔頭部的<head>標記和<title>標記之間，它提供用戶不可見的信息。META標籤有兩個重要的屬性：HTTP標題信息(HTTP-EQUIV)和頁面描述信息(name)。html

name屬性是描述網頁的，對應於content（網頁內容），以便於搜索引擎機器人查找、分類，目前幾乎全部的搜索引擎都使用網上機器人自動查找meta值來給網頁分類。html5

Meta標籤的name屬性語法格式：＜meta name="參數" content="具體參數值"＞java

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 元素有時候被稱爲「安裝時」值：web

運行時元數據：與安裝時值不一樣，在用戶每次啓動固定網站時將讀取如下元數據。所以，網站開發人員可以使用這些值不斷修改用戶體驗。控制對這些值的更改的最佳方法是在固定網站的起始 URL 中定義它們。windows

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，此次不只增長了對大量HTML五、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 print ?

// 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
}
}
}

// 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 print ?

<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]
"
/>

<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的範圍以內。

例：

(設置屏幕寬度爲設備寬度，禁止用戶手動調整縮放)

(設置屏幕密度爲高頻，中頻，低頻自動縮放，禁止用戶手動調整縮放)

另外，iOS 7.1的Safari爲meta標籤新增minimal-ui屬性，在網頁加載時默認隱藏地址欄與導航欄

[html] view plain copy print ?

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

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

此時點擊頂欄區域便能切換爲顯示地址欄、導航欄，再點擊頁面主體區域則又使之隱藏。

相關標籤/搜索

站的

標的