移动端H5开发遇到问题及解决办法总结

来源：互联网发布：win7 445端口入侵教程编辑：程序博客网时间：2024/05/22 14:29

根据工作中遇到的各项移动端问题，总结的几个问题的解决办法:

1、禁止页面滚动

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);  //如果不想让页面滑动，可以加上这段代码

2、判断设备类型是android还是ios

<script type="text/javascript">var u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端alert('是否是Android：'+isAndroid);alert('是否是iOS：'+isiOS);</script>

3、ios移动端头部底部fixed定位，输入框收回闪屏问题

只需要在中间部分外层div添加css样式

position:fixed;top:50px; bottom:50px;overflow:scroll;

就可以实现效果

4、禁止h5页面ios，双击向上滑动，拖拽到底部还能继续拖拽行为

html部分：----------------------------

<body><div class="wrapper">     <section>内容部分aaaa111</section>     <section>内容部分aaaa222</section>     <section>内容部分aaaa333</section></div></body>

css部分：--------------------------

.wrapper2{  position:absolute;  top:0;  bottom:0;  left:0;  right:0;   overflow-y:auto;  -webkit-overflow-scrolling : touch; }

js部分：----------------------------

/*阻止ios拖拽到底部还能继续拖拽*/var ScrollFix = function(elem) {    // Variables to track inputs    var startY, startTopScroll;    elem = elem || document.querySelector(elem);    // If there is no element, then do nothing        if(!elem)        return;    // Handle the start of interactions    elem.addEventListener('touchstart', function(event){        startY = event.touches[0].pageY;        startTopScroll = elem.scrollTop;        if(startTopScroll <= 0)            elem.scrollTop = 1;        if(startTopScroll + elem.offsetHeight >= elem.scrollHeight)            elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1;    }, false);};/*判断设备调用ScrollFix*/var sUserAgent=navigator.userAgent.toLowerCase();if(sUserAgent.match(/iphone os/i) == "iphone os"){    $('.wrapper').addClass('wrapper2');    ScrollFix($('.wrapper2')[0]); }/*阻止用户双击使屏幕上滑*/var agent = navigator.userAgent.toLowerCase();        //检测是否是iosvar iLastTouch = null;                                //缓存上一次tap的时间if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0){    document.body.addEventListener('touchend', function(event)    {        var iNow = new Date()            .getTime();        iLastTouch = iLastTouch || iNow + 1 /** 第一次时将iLastTouch设为当前时间+1 */ ;        var delta = iNow - iLastTouch;        if (delta < 500 && delta > 0)        {            event.preventDefault();            return false;        }        iLastTouch = iNow;    }, false);}

0 0