(轉)Ratchet教程：meta與link標籤

做者：大漠日期： 2014-04-29

經過《Ratchet教程：安裝》一文，你們對Ratchet有了一個初步的瞭解。那麼從這一節開始，咱們一塊兒來開始實戰。經過實戰來更好的學習和了解Ratchet，更但願學習了Ratchet以後，你們在製做移動頁面的時候能夠高呼「so easy!」前端

若是你看了上篇的文章介紹，能夠清晰的記得裏面有一個簡單的模板：html5

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ratchet template page</title>

        <!-- Sets initial viewport load and disables zooming -->
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

        <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <!-- Include the compiled Ratchet CSS -->
        <link href="/css/ratchet.css" rel="stylesheet">

        <!-- Optionally, include either the iOS or Android theme -->
        <link href="/css/ratchet-theme-ios.css" rel="stylesheet">

        <!-- Include the compiled Ratchet JS -->
        <script src="/js/ratchet.js"></script>
    </head>
    <body>
        ....
    </body>
</html>

meta標籤

不少人認爲這不就是一個普通的頭部內容嗎？是的，他們很普通。熟悉的DTD文檔,熟悉的字符編碼「utf-8」。但這些並是不最重要的，重要的是裏面的<meta>標籤，這些<meta>標籤在移動開發中是必不可少的一部分。雖然這樣的文章介紹在網上能夠處處找到，但了能讓你們更系統的玩轉Ratchet。特地將網上介紹<meta>標籤功能集合在此，以供你們參考。android

禁止屏幕縮放

在Ratchet模板中提供的第一個<meta>標籤是有關於屏幕縮放的：ios

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

其實有關於禁止縮放屏幕的<meta>標籤，你們平時看到的比較多的應該是下面這種：css3

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

相比之下，其實第一種比第二種多了一個參數minimal-ui。而這個參數主要功能是讓iOS7.1設備中的Safari移動地址欄和下面的工具條。以下圖對比：web

未加minimal-ui的效果：chrome

已加minimal-ui的效果：瀏覽器

網上有同窗作過測試，minimal-ui目前只有iOS7.1中的Safari瀏覽器支持，其餘瀏覽器會報以下錯誤「The key "minimal-ui" is not recognized and ignored」。

其中content每一個值具體描述以下表所示：

content屬性值	詳細描述
width	可視區域的寬度，其值能夠是一個具體數字或關鍵詞device-width
height	可視區域的高度，其值能夠是一個具體數字或關鍵詞device-height
initial-scale	頁面首次被顯示時可視區域的縮放級別，取值爲1.0時將使頁面按實際尺寸顯示，無任何縮放
minimun-scale	可視區域的最小縮放級別，表示用戶能夠將頁面縮小的程度，取值爲1.0時將禁止用戶縮小至實際尺寸如下
maximun-scale	可視區域的最大縮放級別，表示用戶能夠將頁面放大的程序，取值爲1.0時將禁止用戶放大至實際尺寸以上
user-scalable	指定用戶是否能夠對頁面進行縮放，設置爲yes將容許縮放，no爲禁止縮放
minimal-ui	iOS7.1移動端Safari瀏覽器不顯示地址欄和工具欄

針對上表，在Ratchet中的：

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

具備如下功能：

強制讓文檔與設備的寬度保持1:1
文檔最大的寬度比例是1.0(initial-scale初始刻度值和maximun-scale最大刻度值)
禁止用戶手動放大，使用頁面在設備上固定其大小

有關於視窗meta標籤的詳細介紹，能夠點擊《視窗meta標籤的理解》一文。

容許全屏模式瀏覽

這個功能是iPhone設備中Safari私有<meta>標籤，表示：容許全屏模式瀏覽。

<meta name="apple-mobile-web-app-capable" content="yes">

改變頂部狀態條樣式

這個<meta>標籤和上一個是同樣的，一樣是iPhone中Safari私有標籤，主要用來指定iPhone中Safari頂端的狀態條的樣式：

<meta name="apple-mobile-web-app-status-bar-style" content="black">

其餘meta標籤

在Mobile開發中，其實不只僅這幾個<meta>標籤實用，在《移動平臺WEB前端開發技巧彙總》和《移動平臺對 meta 標籤的定義》有作過一些詳細的整理。在這裏重複摘進來：

忽略頁面中的數字識別爲電話號碼

<meta name="format-detection" content="telephone=no" />

網站開啓對 web app 程序的支持

<meta name="apple-mobile-web-app-capable" content="yes" />

如何去除Android平臺中對郵箱地址的識別

<meta content="email=no" name="format-detection" />

然而<meta>標籤不只僅這些，感興趣的同窗能夠閱讀下面的文章：

link標籤

文檔頭部link標籤就要是用來加載樣式的一個標籤，但在Web的移動開發，link標籤還具備其餘的功能。咱們先來看最多見的功能。

link加載樣式

在模板中，咱們能夠看到有一句這樣的代碼：

<link href="/css/ratchet.css" rel="stylesheet">

這句代碼主要是用來加載Ratchet框架的CSS文件，其實在下載的框架中還有一個ratchet.min.css樣式文件，你也能夠直接加載這個文件：

<link href="/css/ratchet.min.css" rel="stylesheet">

不過這裏有一個細節上的處理。可能不少同窗直接這樣加載，在你的本地虛擬器之上看到的頁面是沒有樣式效果的，以下圖所示：

很明顯咱們樣式沒有加載成功，若是你不確認，可使用瀏覽器排錯工具驗證：

從上圖能夠知道，咱們的樣式文件沒有加載成功，此時你只須要根據本身的項目結構，調整路徑：

<link href="css/ratchet.css" rel="stylesheet">

從新刷新你的瀏覽器，你能夠看到效果出來了：

這或許是Ratchet獨特的不同，以至不少同窗看完第一篇文章，或者沒有看完文章，直擊下載案例，在本身的瀏覽器中沒有效果。其實按這樣的思路來作，你就算是沒有昨天介紹的運行環境，你只須要修改加載進來的文件路徑，你也能看到頁面效果。

接着往下看，在模板中還有一個專門爲iOS提供的主題樣式文件：

<link href="/css/ratchet-theme-ios.css" rel="stylesheet">

具體文件中包括什麼代碼，在這裏咱們就不糾結了，咱們先看看沒有加載這個樣式文件的效果：

加上以後，頂部效果就變了：

在Ratchet框架中，除了有iOS的主題文件以外，還有爲ratchet-theme-android.css文件，若是你是爲Android服務，能夠加上這個樣式文件。爲了更好的對比他們的區別，我從官網上截了幾個效果圖：

在移動開發中link除了用來加載樣式文件以外，還有另外一個用處，能夠用來作Web APP的icon和啓動界面的設置。下面這段介紹摘自於liudy的《移動平臺對 meta 標籤的定義》一文，以供你們參考。

<link rel="apple-touch-icon-precomposed" href="iphone_logo.png" />

這個link就是設置 Web App 的放置主屏幕上 icon 文件路徑。

使用：

該路徑須要注意的就是放到將網站的文檔根目錄下但不是服務器的文檔的根目錄。
圖片尺寸能夠設定爲 57*57（px）或者 Retina 能夠定爲 114*114（px），iPad 尺寸爲 72*72（px）

<link rel="apple-touch-startup-image" href="logo_startup.png" />

這個 link 就是設置啓動時候的界面。

使用：

放置的路徑和上面同樣。
官方規定啓動界面的尺寸必須爲 320*640（px），本來覺得 Retina 屏幕能夠支持雙倍，可是不支持，圖片顯示不出來。

若是對 Web App 的這兩個 meta 還有不能詳細理解的能夠查看官方解釋：Meta Tags。

關於 link 方面還有更多的參數設置（例如：iPod、iPad、iPhone 不一樣尺寸不一樣圖標），能夠查看官方標準文檔：Configuring Web Applications。

總結

在這一節中以Rathect框架模板文件頭部爲主導，從新羅列了meta和link標籤在移動開發中的做用與功能。詳細介紹了模板中所用到的meta標籤功能。同時蒐集了部分網上有關於這方面的介紹。但願這些標籤功能對你們從此的開發有所幫助。

若是你感興趣，請持續觀注本站有關於Ratchet框架相關的更新，若是您對這方面有必定的使用經驗或有填過相關的坑，歡迎與咱們一塊兒分享。

如需轉載，煩請註明出處：http://www.w3cplus.com/mobile/meta-and-link-tags-for-ratchet.html