1 創(chuàng)建主屏幕圖標(biāo) （Creating a home screen icon 秩仆，for ios）
//57*57?
<link rel="apple-touch-icon"href="/custom_icon.png"/>
<link rel="apple-touch-icon"href="touch-icon-iphone.png"/>
<link rel="apple-touch-icon"sizes="72x72"href="touch-icon-ipad.png"/>
<link rel="apple-touch-icon"sizes="114x114"href="touch-icon-iphone4.png"/>
<link rel="apple-touch-icon"sizes="144x144"href="touch-icon-ipad-retina.png"/>
2 啟動畫面圖像 （Creating a splash screen舶吗， for ios）
<!!--iPhone SPLASHSCREEN-->
<!linkhref="apple-touch-startup-image-320x460.png"media="(device-width: 320px)"rel="apple-touch-startup-image"/>
<!!-- iPhone(Retina) SPLASHSCREEN-->
<!linkhref="apple-touch-startup-image-640x920.png"media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image"/>
<!!--iPad(portrait)SPLASHSCREEN-->
<!linkhref="apple-touch-startup-image-768x1004.png"media="(device-width: 768px) and (orientation: portrait)"rel="apple-touch-startup-image"/>
<!!--iPad(landscape)SPLASHSCREEN-->
<!linkhref="apple-touch-startup-image-748x1024.png"media="(device-width: 768px) and (orientation: landscape)"rel="apple-touch-startup-image"/>
<!!--iPad(Retina,portrait)SPLASHSCREEN-->
<!linkhref="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)SPLASHSCREEN-->
<linkhref="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image"/>
developer.apple.com/library/IOs/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6*stackoverflow.com/questions/4687698/mulitple-apple-touch-startup-image-resolutions-for-ios-web-app-esp-for-ipad
3 全屏 （Making it full-screen鸠姨， for ios）– 更像本地App
<metaname="apple-mobile-web-app-capable"content="yes">
4 改變狀態(tài)欄 （Changing the phone status bar, for ios）
content屬性default, black and black-translucent
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
5 阻止縮放 （Preventing scaling）
<meta name="viewport" content="user-scalable=no, width=device-width" />
6 阻止彈性滾動（Preventing elastic scrolling）
<script>function BlockMove(event) { //Tell Safari not to move the window. event.preventDefault() ;} ...
7 檢測屏幕是否旋轉(zhuǎn)（Detect whether device supports orientationchange event, otherwise fall back to the resize event）
var supportsOrientationChange="onorientationchange"inwindow,
orientationEvent=supportsOrientationChange?"orientationchange":"resize";
window.addEventListener(orientationEvent,function() {
alert('HOLY ROTATING SCREENS BATMAN:'+window.orientation+" "+screen.width);
},false);
davidbcalhoun.com/2010/dealing-with-device-orientation
8 禁止webapp跳轉(zhuǎn)到safari（for ios）
// Mobile Safari in standalone mode
if(("standalone"inwindow.navigator)&&window.navigator.standalone) {
// If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true var noddy, remotes = false;
document.addEventListener('click',function(event) {
noddy=event.target;//Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML
while(noddy.nodeName!=="A"&&noddy.nodeName!=="HTML") {
noddy=noddy.parentNode;
}
if('href'innoddy&&noddy.href.indexOf('http')!== -1&&(noddy.href.indexOf(document.location.host)!== -1||remotes)) {
event.preventDefault();
document.location.href=noddy.href;
}
},false);
}
9 禁用手機號碼鏈接（for ios）
<meta name="format-detection" content="telephone=no" />
10 阻止旋轉(zhuǎn)屏幕時自動調(diào)整字體大小
-webkit-text-size-adjust:none;
11 IOS中禁止用戶選中文字
-webkit-user-select:none;
12 iOS中如何禁止用戶保存圖片 復(fù)制圖片
-webkit-touch-calloutt:none;
13 語音輸入
<input type="text" x-webkit-speech />
14 文件上傳, 從相機捕獲媒體
<input type="file" accept = "image/*; capture=camera" />
<input type="file" accept = "video/*; capture=camcorder" />
<input type="file" accept = "audio/*; capture=microphone" />
15 電話短信
<a href="sms:18888886666,18888885555″]]>發(fā)送短信給多個人 的鏈接</a>
<a href="sms:18888886666?body=sms txt"]]> 發(fā)送短信附帶內(nèi)容 的鏈接</a>
<a href="tel:18888886666″]]>Call us at 18888886666 撥打電話的鏈接</a>
