標籤：des android style blog http io color ar os
原文 http://blog.segmentfault.com/jianjian_532633/1190000000654839 添加到推刊
在介紹移動端特有 meta 標籤之前，先簡單說一下 HTML meta 標籤的一些知識。
meta 標籤包含了 HTTP 標題資訊 (http-equiv) 和 頁面描述資訊 (name)。
http-equiv:
該枚舉的屬性定義，可以改變伺服器和使用者代理程式行為的編譯。編譯的值取content 裡的內容。簡單來說即可以類比 HTTP 協議回應標頭。
最常見的大概屬於 Content-Type 了，設定編碼類別型。如
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />H5中可以簡化為
<meta charset="utf-8">http-equiv常見還有其它如下等（合理使用可增加 SEO 收錄）。
name: 該屬性定義了文檔級中繼資料的名稱。用於對應網頁內容，便於搜尋引擎尋找分類，如 keywords, description; 也可以使用瀏覽器廠商自訂的 meta， 如 viewport；
可視地區的定義，如螢幕縮放等。告訴瀏覽器如何規範的渲染網頁。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">上一章節中已經詳細講解過了，這邊就不再重複了。
format-detection對電話號碼的識別
<meta name="format-detection" content="telphone=no" />啟用 webapp 模式, 會隱藏工具列和功能表列，和其它配合使用。
<meta name="apple-mobile-web-app-capable" content="yes" />在webapp模式下，改變頂部狀態條的顏色。
<meta name="apple-mobile-web-app-status-bar-style" content="black" />default(白色，預設) | black(黑色) | black-translucent(半透明)
注意：若值為“black-translucent”將會佔據頁面位置，浮在頁面上方（會覆蓋頁面 20px 高度， Retina 螢幕為 40px ）。
webapp對應的Link標籤apple-touch-icon在webapp下，指定放置主畫面上 icon 檔案路徑;
<link rel="apple-touch-icon" href="touch-icon-iphone.png"><link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"><link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"><link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">預設 iphone 大小為 60px, ipad 為 76px, retina 屏乘2；
如沒有一致尺寸的表徵圖，會優先選擇比推薦尺寸大，但是最接近推薦尺寸的表徵圖。
ios7以前系統預設會對表徵圖添加特效（圓角及高光），如果不希望系統添加特效，則可以用apple-touch-icon-precomposed.png代替apple-touch-icon.png
apple-touch-startup-image在 webapp 下，設定啟動時候的介面;
<link rel="apple-touch-startup-image" href="/startup.png" />不支援 size 屬性，可以使用 media query 來控制。iphone 和 touch 上，圖片大小必須是 230*480 px,只支援豎屏;
其它meta<!-- 啟用360瀏覽器的極速模式(webkit) --><meta name="renderer" content="webkit"><!-- 避免IE使用相容模式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 針對手持功能最佳化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 --><meta name="HandheldFriendly" content="true"><!-- 微軟的老式瀏覽器 --><meta name="MobileOptimized" content="320"><!-- uc強制豎屏 --><meta name="screen-orientation" content="portrait"><!-- QQ強制豎屏 --><meta name="x5-orientation" content="portrait"><!-- UC強制全屏 --><meta name="full-screen" content="yes"><!-- QQ強制全屏 --><meta name="x5-fullscreen" content="true"><!-- UC應用模式 --><meta name="browsermode" content="application"><!-- QQ應用模式 --><meta name="x5-page-mode" content="app"><!-- windows phone 點擊無高光 --><meta name="msapplication-tap-highlight" content="no">參見w3cplus
末尾總結所以，一般建立頁面的時候，可以採用如下結構， 再依據自己的實際需要添加所需即可。
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="format-detection"content="telephone=no" /><title>Demo</title></head><body><!-- code here --></body></html>更多評論評論載入失敗，重新載入WebApp之Meta標籤
<meta name="apple-touch-fullscreen" content="yes">
"添加到主畫面“後，全螢幕顯示<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
這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介面建立應用程式樣式的表徵圖。
移動端Web Meta標籤
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
