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 文件上传, 从相机捕获媒体
| 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]]>拨打电话的链接 |