移动端App混合开发问题 汇总

1、IOS系统，双击页面，页面会向上移动一节，无法滑动复原。

//阻止用户双击放大
        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);
        };

 

2、使用-webkit-overflow-scrolling: touch;触发滚动时，IOS系统，在出现双滑动会导致内部滑动不了。微信环境下，页面上滑时，会使整个页面上移。如图：

双滑动，导致内滑动区域无法滑动问题：微信端页面上滑动：

解决方案：利用IScroll.JS创建滚动区域，或者JS自定义添加滚动。

 

3.MUI框架下，用tap事件代替click事件，导致a标签的href连接跳转失效。

解决方案：利用window.location代替href跳转即可。

 

4、移动端实现1px实线问题。

问题：在PC Web端，我们直接 border:1px solid #ddd;OK,这样没问题。

但在移动端，这样写，会出现一条很粗的模糊的一条线，很难看,也曾经写过0.5px,但在有些设备会出现显示不出来的现象。所以，最终查看了阿里，京东源码发现都是利用添加伪类来实现，这样写更好一些。

解决方法：

li{
            position: relative;
            width: 100%;
            min-height: 2.2rem;
        }
        li:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            right: auto;
            top: auto;
            height: 1px;
            width: 100%;
            background-color: #000;
            display: block;
            z-index: 15;
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%
        }

        @media only screen and (-webkit-min-device-pixel-ratio:2) {
            li:after {
                -webkit-transform: scaleY(.5);
                transform: scaleY(.5)
            }
        }
        
        @media only screen and (-webkit-min-device-pixel-ratio:3) {
            li:after {
                -webkit-transform: scaleY(.33);
                transform: scaleY(.33)
            }
        }