移動端的幾個面試小問題_ZenDei技術網路在線

1. 安卓下大面積觸摸會導致觸發touchmove的問題判斷一下touchstart的上一次位置和當前位置是否一樣，一樣就使move return掉 <body> <div class="page"> <div id="box"></div> </div> <script type="text/j ...

1. 安卓下大面積觸摸會導致觸發touchmove的問題　　判斷一下touchstart的上一次位置和當前位置是否一樣，一樣就使move return掉

<body>
<div class="page">
    <div id="box"></div>
</div>
<script type="text/javascript">
var page = document.querySelector('.page');
page.addEventListener('touchstart', function(e) {
    e.preventDefault();
});
var lastPoint = {};
box.addEventListener('touchstart', function(e) {
    lastPoint = {
        x:e.changedTouches[0].pageX,
        y:e.changedTouches[0].pageY
    }
    this.innerHTML = "start";
    this.innerHTML += "<br/>x:"+e.changedTouches[0].pageX;
    this.innerHTML += "<br/>y:"+e.changedTouches[0].pageY;
});
box.addEventListener('touchmove', function(e) {
    if(e.changedTouches[0].pageX == lastPoint.x
    &&e.changedTouches[0].pageY == lastPoint.Y){
        return;
    }

    this.innerHTML += "<br/>move";
    this.innerHTML = "x:"+e.changedTouches[0].pageX;
    this.innerHTML += "<br/>y:"+e.changedTouches[0].pageY;
    lastPoint = {
        x:e.changedTouches[0].pageX,
        y:e.changedTouches[0].pageY
    }
});
</script>

2.移動端輸入框被遮擋了怎麼辦　　在focus里去做：獲取屏幕高度，比較輸入框的底部是否超出了屏幕，超出就讓外框向上移動超出的距離　　在blur里做：把外框回到原來位置

<div class="page">
    <div class="info"></div>
    <input type="text" class="text" name="">
</div>
<script type="text/javascript" src="js/mTween.js"></script>
<script type="text/javascript">
(function(){
    var page = document.querySelector('.page');
    var text = document.querySelector('.text');
    var info = document.querySelector('.info');
    var old = 0;
    css(page,"translateY",0);
    /*
        移動端輸入框被遮擋的問題
            1) 在軟體盤彈出之後（在focus中加個延遲時間），獲取input的坐標
            2) 判斷input是否遮擋
                1. 判斷 input 是否在 可視區的高度以下
            3) 如果被遮擋了 就向上移動整個頁面
                1. 用被軟體盤遮擋的距離     

    */
    text.addEventListener('focus', function(e) {
        setTimeout(function(){
            //延遲一段時間之後，才可以獲取到軟鍵盤彈出之後的坐標
            var rect = text.getBoundingClientRect();
            var h = document.documentElement.clientHeight; 
            old = css(page,"translateY");
            if(rect.bottom > h){
                //info.innerHTML = "被遮擋了";
                var dis = rect.bottom - h;
                css(page,"translateY", old - dis);
            }
        },1000);
    });
    text.addEventListener('blur', function(e) {
        old = css(page,"translateY",old);
    });
})();
</script>

3.移動端怎麼固定橫屏顯示　　檢測手機豎屏的時候，元素給元素添加90deg的旋轉　　檢測手機橫屏的時候，元素給元素的旋轉再改為0 4.事件點透　　　　pc端的滑鼠事件在移動端也有效果，但是在移動端使用滑鼠事件會有300毫秒的延遲，如果有兩個元素是重疊的，點擊之後上面那個元素消失了就會出現點透事件，如果下麵元素有滑鼠事件，就會被觸發　　因為執行過程：手指按下之後，會先執行touch事件，然後記錄點擊的坐標，300ms之後，在該坐標上查找元素，如果該元素綁定了滑鼠事件，就把事件執行了　　解決辦法： e.preventDefault ( )，或者延遲三百毫秒以上來處理事件　　不推薦的解決方法：給單個空間添加阻止冒泡 5.解決安卓下點擊了軟鍵盤縮放之後，觸發不了input的blur的問題

<body>
<input id="text" type="text" name="">
<div id="info"></div>
<script type="text/javascript">
(function(){
    var text = document.querySelector('#text');
    var info = document.querySelector('#info');
    text.onfocus = function(){
        //軟鍵盤的彈出 會影響視窗的大小發生改變
        // 展開是 改變一次，收縮起來又改變一次
        window.addEventListener('resize', toResize);
    };
    function toResize(){
        window.removeEventListener('resize', toResize);
        window.addEventListener('resize', toBlur);
    }
    function toBlur(){
        window.removeEventListener('resize', toBlur);
        text.blur();
    }
})();    
</script>

6.目前新版瀏覽器不支持viewport中的禁止縮放和最大縮放值限制　　阻止預設事件 7.多指操作的相容　　安卓下沒有gestures事件，需要利用e.touches自己去封裝。

document.addEventListener('touchstart', function(e) {
    e.preventDefault();
});
/*
init:{
    el: 元素,
    start:fn,
    change:fn,
    end:fn
}
*/
(function(){
    var box = document.querySelector('#box');
    var startDeg = 0;
    var startScale = 0;
    css(box,"rotate",0);
    css(box,"scale",100);
    gesture({
        el:box,
        start: function(e){
            startScale = css(box,"scale")/100;
            startDeg = css(box,"rotate");
            this.style.background = "blue";
        },
        change: function(e){
            css(this,"scale",(e.scale * startScale)*100);
            this.innerHTML = e.rotation;
            css(box,"rotate",e.rotation + startDeg);
        },
        end: function(e){
            this.style.background = "red";
        }
    });
})();
function gesture(init){
    var el = init.el;
    var isGesture = false;
    var startDis = 0;
    var startDeg = 0;
    el.addEventListener('touchstart', function(e) {
         if(e.touches.length >= 2){
             startDis = getDis(e.touches[0],e.touches[1]);
             startDeg = getDeg(e.touches[0],e.touches[1]);
             isGesture = true;
             init.start&&init.start.call(el,e);
         }
    }); 
    el.addEventListener('touchmove', function(e) {
         if(isGesture&&e.touches.length >= 2){
             isGesture = true;
             var nowDis = getDis(e.touches[0],e.touches[1]);
             var nowDeg = getDeg(e.touches[0],e.touches[1]);
             e.scale = nowDis/startDis;//縮放值
             e.rotation = nowDeg - startDeg;
             init.change&&init.change.call(el,e);
         }
    }); 
    el.addEventListener('touchend', function(e) {
         if(isGesture){
             init.end&&init.end.call(el,e);
         }
         isGesture = false;
    }); 
}    
function getDis(Point,Point2){
    return Math.sqrt((Point.pageX - Point2.pageX)*(Point.pageX - Point2.pageX) + (Point.pageY - Point2.pageY)*(Point.pageY - Point2.pageY));
}
function getDeg(Point,Point2){
    var y = Point.pageY - Point2.pageY;
    var x = Point.pageX - Point2.pageX;
    return Math.atan2(y,x)/Math.PI*180;
}

8.滑屏時的卡頓問題　　阻止預設事件 9.transition移動端的閃屏問題　　把外框變成3D的，一般情況下不會遇到。 10.使用了3d做動畫之後，3d元素下邊的文字失真的問題　　給上面動畫的幻燈片什麼的外層加上絕對定位，定位裡面一層加上相對定位。 11.部分安卓下調用file，只能調用到相冊，不能調用攝像頭　　在input上加上一個caption屬性，但是如果是x5或者是ios瀏覽器下就會出現只能調到攝像頭的問題，所以要加一個判斷，判斷瀏覽器的版本，如果是iso瀏覽器或者x5瀏覽器，就把加caption屬性這個renturn掉不加 12.audio的不能自動播放問題　　給document加上.play() 13.如何判斷網路環境是無線還是流量　　navigator裡面有所有和網路相關的東西