本系列文章，如果沒(méi)有特別說(shuō)明，兼容安卓4.0.4+，測試demo
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body></body></html><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><meta name="format-detection"content="telephone=no, email=no" />視圖窗口，移動(dòng)端特屬的標簽。一般使用下面這段代碼即可：
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />上面的代碼依次表示設置寬度為設備的寬度，默認不縮放，不允許用戶(hù)縮放（即禁止縮放），在網(wǎng)頁(yè)加載時(shí)隱藏地址欄與導航欄（ios7.1新增）。
width – // [pixel_value | device-width] viewport 的寬度，范圍從 200 到 10,000，默認為 980 像素height – // [pixel_value | device-height ] viewport 的高度，范圍從 223 到 10,000 initial-scale – // float_value，初始的縮放比例 （范圍從 > 0 到 10）minimum-scale – // float_value，允許用戶(hù)縮放到的最小比例maximum-scale – // float_value，允許用戶(hù)縮放到的最大比例user-scalable – // [yes | no] 用戶(hù)是否可以手動(dòng)縮放target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 目標屏幕像素密度注：target-densitydpi屏幕像素密度和縮放有關(guān)，你可以試試修改這個(gè)demo，用手機看下實(shí)際效果。我一般不設置這個(gè)屬性。
是否啟動(dòng)webapp功能，會(huì )刪除默認的蘋(píng)果工具欄和菜單欄。
<meta name="apple-mobile-web-app-capable" content="yes" />當啟動(dòng)webapp功能時(shí)，顯示手機信號、時(shí)間、電池的頂部導航欄的顏色。默認值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。這個(gè)主要是根據實(shí)際的頁(yè)面設計的主體色為搭配來(lái)進(jìn)行設置。
<meta name="apple-mobile-web-app-status-bar-style" content="black" />注：如果對apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style不太理解，可查閱下面的參考資料第三篇文章，里面有截圖說(shuō)明。
忽略頁(yè)面中的數字識別為電話(huà)號碼
<meta name="format-detection" content="telephone=no" />同樣還有一個(gè)email識別
<meta name="format-detection" content="email=no" />當然兩者可以寫(xiě)在一起
<meta name="format-detection" content="telphone=no, email=no" /><!-- 啟用360瀏覽器的極速模式(webkit) --><meta name="renderer" content="webkit"><!-- 避免IE使用兼容模式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 針對手持設備優(yōu)化，主要是針對一些老的不識別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 點(diǎn)擊無(wú)高光 --><meta name="msapplication-tap-highlight" content="no">參考資料：
如果apple-mobile-web-app-capable設置為yes了，那么在iPhone,iPad,iTouch的safari上可以使用添加到主屏按鈕將網(wǎng)站添加到主屏幕上。而通過(guò)設置相應apple-touch-icon標簽，則添加到主屏上的圖標就會(huì )使用我們指定的圖片。
以下是針對ox不同設備，選擇一個(gè)最優(yōu)icon。默認iphone的大小為60px，ipad為76px，retina屏乘以2倍。
<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">ios7以前系統默認會(huì )對圖標添加特效（圓角及高光），如果不希望系統添加特效，則可以用apple-touch-icon-precomposed.png代替apple-touch-icon.png
圖標使用的優(yōu)先級如下：
如果未在區域指定用link標簽指定圖標，會(huì )自動(dòng)搜索網(wǎng)站根目錄下以apple-touch-icon為前綴的png圖標。
注：ios7不再為icon添加特效，ios7以前則默認為icon添加特效，除非icon有關(guān)鍵字-precomposed.png為后綴。
參考資料：
同樣基于apple-mobile-web-app-capable設置為yes，可以用WebApp設置一個(gè)類(lèi)似NativeApp的啟動(dòng)畫(huà)面。
<link rel="apple-touch-startup-image" href="/startup.png">和apple-touch-icon不同，apple-mobile-web-app-capable不支持sizes屬性，所以使用media來(lái)控制retina和橫豎屏加載不同的啟動(dòng)畫(huà)面。
// iPhone<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />// iPhone Retina<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />// iPhone 5<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">// iPad portrait<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />// iPad landscape<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />// iPad Retina portrait<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />// iPad Retina landscape<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />參考資料：
空白頁(yè)面模板，然后再根據具體情況在此基礎上添加apple-touch-icon和apple-touch-startup-image
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection"content="telephone=no, email=no" /> <title>Document</title></head><body></body></html>如需轉載，煩請注明出處：http://www.w3cplus.com/mobile/mobile-terminal-refactoring-create-page.html
聯(lián)系客服
