1.移动端h5展示一般通过设置meta的viewport来规范页面的展示效果

/* 在ios >= 10 系统下，user-scalable=no已不起作用 */
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, maximum-scale=1.0 user-scalable=no">

2.移动端样式响应式js文件，下载文件可以找我，现在说一下我将整个页面的font-size设置为100px，这样依据这个，所有的rem也是很好计算的

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;

        if (width / dpr > 560) {
            width = 560 * dpr;
        }
        var wr;
        var rem;
        if(width==375){
            wr=width / 100;
            rem = width / wr;
        }else{
            wr=width / 375;
            rem=wr * 100;
        }
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

3.数据滑动到页面底部自动加载更多数据，手机不同，到达底部后返回的数据不同，因此需要在此基础上加上一个范围

var firstX = 0,firstY = 0,endX = 0,endY = 0;
            window.addEventListener('touchstart',function(e){
                firstX = e.targetTouches[0].clientX;
                firstY = e.targetTouches[0].clientY;
            })
            window.addEventListener('touchend',function(e){
                endX = e.changedTouches[0].clientX;
                endY = e.changedTouches[0].clientY;
                moveX = endX - firstX;
                moveY = endY - firstY;
                if(Math.abs(moveX) > 60 || Math.abs(moveY) > 60){
                    if(Math.abs(moveX) > Math.abs(moveY)){
                        var ele = moveX > 0 ? '向右' : '向左';
                    }else{
                        var ele = moveY > 0 ? '向下' : '向上';
                        // alert(ele)
                        if(ele=='向上'){
                            var scrollTop = parseInt($(document).scrollTop());
                            var scrollHeight = $(document).height();
                            var windowHeight = $(this).height();
                            if (scrollTop + windowHeight <= scrollHeight + 168 && scrollTop + windowHeight >= scrollHeight - 168) {
                                //你需要实现的效果

                            }
                        }
                    }
                }
            })

4.ios端下滑不流畅

/*只需要在css里面加一行代码，代码如下*/
    -webkit-overflow-scrolling: touch;

5.flex布局部分手机靠左侧布局（一定要用兼容性写法）

    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;

6.点击输入框之后，ios端页面整体上移，失去焦点之后，页面不回原来的位置

 $("input,select,textarea").blur(function(){
            setTimeout(function() {
                    var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                    window.scrollTo(0, Math.max(scrollHeight - 1, 0));
                }, 100);
        })    

7.禁止 iOS 识别长串数字为电话

<meta name="format-detection" content="telephone=no" />

8.一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发

/* 只需要对不触发click事件的元素添加一行css代码 */
    cursor: pointer;

未完。。。待续。。。

欢迎各位同仁提出更好的解决办法