移動端網頁版開發遇到的問題

Wangvv發表於2020-08-14
網頁

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;

未完。。。待續。。。

歡迎各位同仁提出更好的解決辦法

 

相關文章