移动端的几个面试小问题

2018-06-24 00:08:52来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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里面有所有和网络相关的东西

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:[js高手之路]node js系列课程-创建简易web服务器与文件读写

下一篇:Baffle.js – 用于实现文本模糊效果的 JavaScript 库