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

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

1、禁止页面滚动

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

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

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

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

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

就可以实现效果

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

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

     
内容部分aaaa111
     
内容部分aaaa222
     
内容部分aaaa333

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();        //检测是否是ios
var 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);
}