WebApp之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" />
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章