移动web app开发小贴士,移动开发经验记录
解决300ms的延迟
a、用zepto的tap事件，但不兼容pc
b、用fastclick
c、tappy
d、touchjs
阻止弹性滚动
<script>
functionBlockMove(event){
//Tell Safari not to move the window.
event.preventDefault();
}
</script>
<body ontouchmove="BlockMove(event);">
...
</body>
检测屏幕是否旋转
//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);
禁止webapp跳转到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
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);
}
阻止旋转屏幕时自动调整字体大小
-webkit-text-size-adjust:none;
IOS中禁止用户选中文字
-webkit-user-select:none;
iOS中如何禁止用户保存图片 复制图片
-webkit-touch-calloutt:none;
语音输入
<input type="text"x-webkit-speech />
文件上传, 从相机捕获媒体
<input type="file"accept="image/*; capture=camera" /> <input type="file"accept="video/*; capture=camcorder" /> <input type="file"accept="audio/*; capture=microphone" />
兼容安卓微信调用摄像头 <input type="file" name="file" capture="camera"> 兼容安卓默认选择sd卡上的相册图片 <input type="file" name="file" accept="image/*" >
发送短信给多个人
<a href="sms:18888886666,18888885555"> 发送短信给多个人