meta與link標籤
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>標籤功能集合在此，以供你們參考。javascript
禁止屏幕縮放
在Ratchet模板中提供的第一個<meta>標籤是有關於屏幕縮放的：css
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
其實有關於禁止縮放屏幕的<meta>標籤，你們平時看到的比較多的應該是下面這種：html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
相比之下，其實第一種比第二種多了一個參數minimal-ui。而這個參數主要功能是讓iOS7.1設備中的Safari移動地址欄和下面的工具條。以下圖對比：html5
未加minimal-ui的效果：java
已加minimal-ui的效果：android
網上有同窗作過測試，minimal-ui目前只有iOS7.1中的Safari瀏覽器支持，其餘瀏覽器會報以下錯誤「The key "minimal-ui" is not recognized and ignored」。ios
其中content每一個值具體描述以下表所示：css3
| 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中的：web
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
具備如下功能：chrome
- 強制讓文檔與設備的寬度保持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 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>標籤不只僅這些，感興趣的同窗能夠閱讀下面的文章：
- 視窗meta標籤的理解
- 在HTML中使用meta標籤的基礎知識和最佳實踐
- Creating a Mobile Web Application with Meta Tags
- Quick Tip: Don't Forget the Viewport Meta Tag
- "Mobifying" Your HTML5 Site
- Creating a Mobile Web Application with Meta Tags
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 文件路徑。
使用：
- 該路徑須要注意的就是放到將網站的文檔根目錄下但不是服務器的文檔的根目錄。
- 圖片尺寸能夠設定爲 5757（px）或者 Retina 能夠定爲 114114（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標籤功能。同時蒐集了部分網上有關於這方面的介紹。但願這些標籤功能對你們從此的開發有所幫助。
- 1. Meta，Link標籤詳解
- 2. (轉)Ratchet教程：meta與link標籤
- 3. HTML標籤---head,meta,link,title,多媒體標籤，超連接標籤等
- 4. meta標籤
- 5. html meta標籤
- 6. Html meta 標籤
- 7. html5——meta標籤
- 8. html meta 標籤
- 9. Html Link 標籤
- 10. meta--------link
- 更多相關文章...
- • MyBatis if標籤 - MyBatis教程
- • MyBatis foreach標籤 - MyBatis教程
- • Composer 安裝與使用
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。