移動端App混合開發問題 彙總

一、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);
        };

 

二、使用-webkit-overflow-scrolling: touch;觸發滾動時，IOS系統，在出現雙滑動會致使內部滑動不了。微信環境下，頁面上滑時，會使整個頁面上移。如圖：

雙滑動，致使內滑動區域沒法滑動問題：微信端頁面上滑動：

解決方案：利用IScroll.JS建立滾動區域，或者JS自定義添加滾動。

 

3.MUI框架下，用tap事件代替click事件，致使a標籤的href鏈接跳轉失效。

解決方案：利用window.location代替href跳轉便可。

 

四、移動端實現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)
            }
        }