移动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>
functionBlockMove(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.
varsupportsOrientationChange="onorientationchange"inwindow,
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"inwindow.navigator)&&window.navigator.standalone){
// If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true
varnoddy,
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）
|
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]]>拨打电话的链接
|
