移动端web开发

如今，走在路上，望一望四周均会发现，十个人当中有九个是低头族。科技的发展改善了人们的生活品质，手机由曾经的老人机、按键机到如今的智能手机，还有即将普及的全面屏时代。手机的普及，手机APP也随着盛行，各种电商、微商、小程序也随着风靡，而APP的开发,关于APP的开发有些是通过web的移动端开发来实现的，因此，移动端的web开发是至关重要的。接下来看一看关于移动端的web开发。
一、web开发的特点:
（1）浏览器版本基本为主流的浏览器版本，不用太考虑兼容性
（2）内核不同，其中Android的内核为webkit,IOS的内核为Darwin Mach。
（3）分辨率不同
二、布局方式
流式布局，即百分比布局
1、配合box-sizing:border-box使用
2、宽度随手机屏幕宽度自适应,高度不可
3、高度随手机屏幕高度自适应:
（1）根节点字体大小:rem
（2）上下文字体大小:em
（3）1%的屏幕高度:1vh
（4）1%的屏幕宽度:1hw
三、视口
若想要进行移动端web的开发，在开头就必须添加视口，添加视口方式:

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
//width:设置视口宽度
//initial-scale:初始化缩放比，大于0的数字
//maximum-scale:最大缩放比，大于0的数字
//minimum-scale：最小缩放比，大于0的数字
//user-scalable：用户是否可以缩放，yes/no,也可以是1/0

四、事件
1、触碰屏幕时触发:touchstart
2、滑动屏幕时触发:touchmove
3、离开屏幕时触发:touchend
4、系统停止跟踪触碰时触发:touchcancel
其中，touchstart事件+touchend事件等价于click事件，但移动端的click事件具有延迟，因而开发人员不会使用，故，自行封装了一个函数代替click事件,该事件不会有延迟

function tap(obj,callback){
                var isMove=false;//判断是否在屏幕上移动
            var star=0;//触摸屏幕开始的时间
                var end=0;//离开屏幕的时间
                var distance=0;//触摸屏幕开始到离开屏幕的事件
                //监听touchstar事件
                obj.addEventListener("touchstar",function(){
                    star=new Date().getTime();//开始触摸屏幕的时间为当前时间的毫秒数
                })

                //监听touchmove事件
                obj.addEventListener("touchmove",function(){
                    isMove=true;
                })

                obj.addEventListener("touchend",function(){
                    end=new Date().getTime();
                    distance=end-star;
                    if(!isMove&&distance<150){
                        callback&&callback();
                    }

                    //复原
                    isMove=false;
                    star=0;
                    end=0;
                    distance=0;
                })
        }

五、切图
移动端是多少倍屏，设置图片宽高大小时就缩小为移动端的多少分之一。
关于移动端web的开发还有很多知识，若想要从事这一工作的人员可以自己上网查找更多的学习资料。