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

最新推荐文章于 2024-08-05 17:19:49 发布

原创最新推荐文章于 2024-08-05 17:19:49 发布 · 2.6k 阅读

4 ·

CC 4.0 BY-SA版权

移动资讯专栏收录该内容

14 篇文章

订阅专栏

本文探讨了解决移动端交互中的延迟问题，包括使用Zepto的tap事件、FastClick、tappy、touchjs等方法。同时，介绍了如何阻止弹性滚动、检测屏幕旋转，以及在iOS设备上防止文字选中、图片保存和复制的功能限制。此外，还提供了在iOS中禁止用户自动调整字体大小的方法，并详细说明了文件上传、语音输入和兼容不同平台的摄像头捕获媒体的功能实现。最后，文章阐述了如何发送短信给多个人的操作步骤。

解决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"> 发送短信给多个人