WebApp 中Meta标簽屬性及含義

一、 meta 中的viewport

viewport即可視區域，對于桌面浏覽器而言，viewport指的就是除去所有工具欄、狀态欄、滾動條等等之後用于看網頁的區域。代碼的意思是，讓viewport的寬度等于實體裝置上的真實分辨率，不允許使用者縮放。

1. width : 控制viewport的大小，可以指定一個值，如600，或者特殊的值，如device-width為裝置的寬度（機關是縮放為100%的CSS的像素）
2. height : 和width相對應，指定高度
3. initial-scale : 初始縮放比例，頁面第一次加載時的縮放比例
4. maximum-scale : 允許使用者縮放到的最大比例，範圍從0到10.0
5. minimum-scale : 允許使用者縮放到的最小比例，範圍從0到10.0
6. user-scalable : 使用者是否可以手動縮放，值可以是：①yes、 true允許使用者縮放；②no、false不允許使用者縮放

二、meta 中的name

name 屬性

1. ＜meta name=”Generator” contect=”“＞用以說明生成工具（如Microsoft FrontPage 4.0）等
2. ＜meta name=”keywords” contect=”“＞向搜尋引擎說明你的網頁的關鍵詞
3. ＜meta name=”Description” contect=”“＞告訴搜尋引擎你的站點的主要内容
4. ＜meta name=”Author” contect=”你的姓名”＞告訴搜尋引擎你的站點的制作的作者

5. ＜meta name=”Robots” contect=”all | none | index | noindex |

   follow | nofollow”＞

其中的屬性說明如下：

設定為all：檔案将被檢索，且頁面上的連結可以被查詢；

設定為none：檔案将不被檢索，且頁面上的連結不可以被查詢；

設定為index：檔案将被檢索；

設定為follow：頁面上的連結可以被查詢；

設定為noindex：檔案将不被檢索，但頁面上的連結可以被查詢；

設定為nofollow：檔案将不被檢索，頁面上的連結可以被查詢

三、webapp裡主要的mate用途

<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）。

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

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

在iOS中有兩個meta值，apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style，這兩個會讓網頁内容以應用程式風格顯示，并使狀态欄透明。

說明：這個link就是設定web app的放置主螢幕上icon檔案路徑。 圖檔尺寸可以設定為57*57（px）或者Retina可以定為114*114（px），ipad尺寸為72*72（px）

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

将不識别郵箱，告訴裝置忽略将頁面中的數字識别為電話号碼

<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />

<link rel="apple-touch-iconprecomposed" href="/static/images/identity/HTML5_Badge_64.png" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" />

iOS用rel=”apple-touch-icon”,android

用rel=”apple-touch-icon-precomposed”。這樣就能在使用者把網頁存為書簽時，在手機HOME界面建立應用程式樣式的圖示。

<meta name="sharecontent" data-msg-img="縮略圖位址" data-msg-title="标題" data-msg-content="簡介" data-msg-callBack="" data-line-img="縮略圖位址" data-line-title="标題" data-line-callBack=""/>

微信分享頁面設定

http://www.cnblogs.com/aimyfly/p/4432121.html