您的位置：首页 > 移动开发

移动web app开发小贴士,移动开发经验记录

2015-02-10 12:10 423 查看

解决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" />

发送短信给多个人

<a href="sms:18888886666,18888885555"> 发送短信给多个人
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航