web app开发

1 创建主屏幕图标 （Creating a home screen icon ，for ios）

 

 

1 2 3 4 5 6

/ /57 *57 <link rel = "apple-touch-icon" href = "http://wlog.cn/html/" /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" />

 

启动画面图像 （Creating a splash screen， for ios）

 

 

1 2 3 4 5 6 7 8 9 10 11 12

<!!-- iPhone SPLASHSCREEN--> <!link href="http://wlog.cn/html/"apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" /> <!!-- iPhone (Retina) SPLASHSCREEN--> <!link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <!!-- iPad (portrait) SPLASHSCREEN--> <!link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" /> <!!-- iPad (landscape) SPLASHSCREEN--> <!link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" /> <!!-- iPad (Retina, portrait) SPLASHSCREEN--> <!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) SPLASHSCREEN--> <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" />

 

3 全屏 （Making it full-screen， for ios）– 更像本地App

 

 

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

 

4 改变状态栏 （Changing the phone status bar, for ios）
content属性default, black and black-translucent

 

 

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

 

5 阻止缩放 （Preventing scaling）

 

 

1	<meta name = "viewport" content = "user-scalable=no, width=device-width" />

 

6 阻止弹性滚动（Preventing elastic scrolling）

 

 

1 2 3 4 5 6 7 8 9

<script> function BlockMove ( event ) {      //Tell Safari not to move the window.      event . preventDefault ( ) ; } </script> < body ontouchmove = "BlockMove(event);" >    . . . < / body >

 

7 检测屏幕是否旋转（Detect whether device supports orientationchange event, otherwise fall back to the resize event）

 

 

1 2 3 4 5 6 7

//Detect whether device supports orientationchange event, otherwise fall back to //the resize event. var supportsOrientationChange = "onorientationchange" in window ,      orientationEvent = supportsOrientationChange ? "orientationchange" : "resize" ; window . addEventListener ( orientationEvent , function ( ) {      alert ( 'HOLY ROTATING SCREENS BATMAN:' + window . orientation + " " + screen . width ) ; } , false ) ;

 

8 禁止webapp跳转到safari（for ios）

 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// Mobile Safari in standalone mode if ( ( "standalone" in window . 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' in noddy && noddy . href . indexOf ( 'http' ) !== - 1 && ( noddy . href . indexOf ( document . location . host ) !== - 1 || remotes ) ) {              event . preventDefault ( ) ;              document . location . href = noddy . href ;          }      } , false ) ; }

 

9 禁用手机号码链接（for ios）

 

 

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

 

10 阻止旋转屏幕时自动调整字体大小

 

 

1	-webkit-text-size-adjust : none ;

 

11 IOS中禁止用户选中文字

 

 

1	-webkit-user-select : none ;

 

12 iOS中如何禁止用户保存图片 复制图片

 

 

1	-webkit-touch-calloutt : none ;

 

13 语音输入

 

 

1	<input type = "text"x -webkit -speech />

 

14 文件上传, 从相机捕获媒体

 

 

 

 

 

 

XHTML

 

1 2 3

<input type = "file" accept = "image/*; capture=camera" /> <input type = "file" accept = "video/*; capture=camcorder" /> <input type = "file" accept = "audio/*; capture=microphone" />

 

15 电话短信

 

 

1 2 3

<a href = "http://wlog.cn/html/"sms :18888886666 ,18888885555″ ] ] > 发送短信给多个人 的链接 <a href = "sms:18888886666?body=sms txt" ] ] > 发送短信附带内容 的链接 <a href ="tel :18888886666″ ] ] > Call us at 18888886666 </a]]>拨打电话的链接