WebApp之Meta標籤

一.Meta標籤  
<meta name="apple-touch-fullscreen" content="yes">"添加到主屏幕「後，全屏顯示 <meta name="apple-mobile-web-app-capable" content="yes" />
這meta的做用就是刪除默認的蘋果工具欄和菜單欄。content有兩個值」yes」和」no」,當咱們須要顯示工具欄和菜單欄時，這個行meta就不用加了，默認就是顯示。

<meta name=」apple-mobile-web-app-status-bar-style」 content=black」 /> 
默認值爲default（白色），能夠定爲black（黑色）和black-translucent（灰色半透明）。
注意： 若值爲「black-translucent」將會佔據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕爲40px）。

在iOS中有兩個meta值，apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style，這兩個會讓網頁內容以應用程序風格顯示，並使狀態欄透明。
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">


<link rel="apple-touch-icon-precomposed" href="http://spion.blog.163.com/blog/iphone_milanoo.png" />
說明： 這個link就是設置web app的放置主屏幕上icon文件路徑。
圖片尺寸能夠設定爲57*57（px）或者Retina能夠定爲114*114（px），ipad尺寸爲72*72（px）

<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />//將不識別郵箱
告訴設備忽略將頁面中的數字識別爲電話號碼 

iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。這樣就能在用戶把網頁存爲書籤時，在手機HOME界面建立應用程序樣式的圖標。
<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />

 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">

參考文獻：http://www.w3school.com.cn/html5/html5_meta.asp

 

二. Meta元素可視區

　　默認狀況下，iPhone上的Safari會象在大屏幕的桌面瀏覽器那樣顯示你的頁面，寬度達到了980像素，而後縮小內容以適應iPhone的小屏幕，所以用戶在iPhone看這個頁面時感受字體就比較小了，也比較模糊，必需要放大才能看得真切，對於一個普通的Web頁面彷佛能夠接受，但對於一個經常使用的應用程序就沒幾我的可以受得了。

　　幸運的是可使用特殊的Meta元素可視區進行糾正：

<meta name="viewport" content="width=device-width"/>

　　這個元素通知瀏覽器使用設備的寬度做爲可視區的寬度，而不是默認的980像素了，咱們能夠看看兩個不一樣的例子。

　　例3(連接：http://www.sitepoint.com/examples/iphone-development-12tips/no-viewport.html)顯示了一個簡單的段落元素，沒有Meta元素可視區，字體有點模糊。在iPhone中運行的實際狀況以下圖所示。

圖 1 無可視區的顯示效果

　　例4(連接：http://www.sitepoint.com/examples/iphone-development-12tips/viewport.html)包括了一個可視區元素，如今設備寬度只有320像素，字體也比前一個例子更清晰了。在iPhone中運行的實際狀況以下圖所示。

圖 2 有可視區的顯示效果

　　另外，你還能夠手動設置device-width的值，例如，假設你的博客頁面的寬度是750像素，那麼桌面屏幕最佳大小就是800x600像素，例5(連接：http://www.sitepoint.com/examples/iphone-development-12tips/fixed750.html)顯示了一個刪減版本，若是你在iPhone中瀏覽它，你會看到980像素剩下的空間都填充了白色。

　　爲了消除額外的空間，可使用meta元素可視區將寬度設爲780像素：

<meta name="viewport" content="width=780"/>

　　例6(連接：http://www.sitepoint.com/examples/iphone-development-12tips/fixed750-viewport.html)顯示了meta元素可視區佈局被固定後的效果。

　　Meta元素可視區的內容能夠包括多個逗號分隔的值，如initial-scale – 用戶最初看到頁面時的放大級別，對於Web應用程序，一個常見的設置是：

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

　　這個元素設置寬度爲設備的最大寬度，禁止用戶放大和縮小