元數據標籤的含義和用法


最齊全的網站元數據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 (關鍵字)
說明:告訴搜索引擎你網頁的關鍵字是什麼。
用法:<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 元素有時候被稱爲“安裝時”值:



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


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
 在CODE上查看代碼片派生到我的代碼片
  1. // Function available in default.js file in Visual Studio templates provided  
  2. WinJS.Application.onmainwindowactivated = function (e) {  
  3.   if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {  
  4.     // Insert this code to handle incoming argument when Internet Explorer launches the app  
  5.     if (e.detail.arguments) {  
  6.       // Parse the value of the msApplication-Arguments string  
  7.       // Direct incoming user to relevant in-app content  
  8.     }  
  9.   }  
  10. }  



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
 在CODE上查看代碼片派生到我的代碼片
  1. <meta name="viewport"  
  2. content="  
  3.     height = [pixel_value | device-height] ,  
  4.     width = [pixel_value | device-width ] ,  
  5.     initial-scale = float_value ,  
  6.     minimum-scale = float_value ,  
  7.     maximum-scale = float_value ,  
  8.     user-scalable = [yes | no] ,  
  9.     target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]  
  10. "  
  11. />  

含義如下:

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
 在CODE上查看代碼片派生到我的代碼片
  1. <meta name="viewport" content="minimal-ui">  

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章