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

  • 2020 年 8 月 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;

未完。。。待續。。。

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