1. 程式人生 > >最齊全的站點元數據meta標簽的含義和使用方法

最齊全的站點元數據meta標簽的含義和使用方法

科學計算器 rar days fresh dsm dev 預覽 官方文檔 web

最齊全的站點元數據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,[email protected]">
註意: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="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標簽

<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標簽的含義和使用方法