移动端详解

1. PC 端和移动端的区别

（1）页面承载量不同，

PC端屏幕大，内容多，而移动端屏幕相对较小，承载的内容也会因此有很大的差异，当一款成熟的 PC 端产品移植到移动端，会需要考虑什么功能应该被砍掉，什么功能应该被保留。内容也因该更加简练。

（2）交互方式不同，

PC 端采用鼠标点击的方式，移动端采取手指触碰的方式。在设计时，PC端往往更多考虑用户视觉浏览路线，而移动端则会更多地考虑手指交互习惯，人体工学等。

（3）使用场景不同

PC 端使用场景一般都比较固定，而移动端则有很大的不同，可能是走路的时候，等人，坐公交/地铁途中，上班、上课休息期间，睡觉之前等等。不同的使用环境肯定会导致不同的设计方案，PC 端因为使用环境相对固定，设计方案会更加清晰。而移动端的场景千变万化，很难同时兼顾所有的场景，只能找出最主要的目标用户的使用场景，以此为主要目标点，同时兼顾次要目标点来进行设计。

（4）网络接入方式

PC 端一般连结宽带或者 wifi，而移动端则连接2G/3G/4G等，需要消耗流量。因此再 PC 的用户一般不会考虑页面消耗的流量，而移动端产品，如果消耗流量过大，用户会因为流量费用/加载速度等原因而不愿意或者根本不能使用。

注意图片的适配和压缩。

注意点：

1. PC 端和移动端的区别，

2. PC 端没有触摸的各种事件，移动端有；但是还移动端没有鼠标移动事件，PC 端有；

3. PC 端最常用的布局是固定宽度 980px（也有 960px ，1000px，1200px）；而在移动端，因为有很多网页是可以横屏看，也可以竖屏看，并且很多屏幕的分辨率都是不一样的，所以只要牵涉到移动端的都要考虑响应式布局；

4. PC 端考虑更多的是浏览器的兼容性，但是再移动端考虑更多的是手机兼容。

1. PC 端主要是 px 单位 

2. rem：1rem= 当前文档的根元素（html）的fontsize大小

布局上 flex布局

事件上 touchstart，touchmove，touchend

fontsize.js 根据屏幕宽度来调整 根元素（html）的 fontsize

//designWidth:设计稿的实际宽度值，需要根据实际设置
//maxWidth:制作稿的最大宽度值，需要根据实际设置
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，
//例如设计稿为375，最大宽度为1000，则为(375,1000)
(function(designWidth, maxWidth) {    
    var doc = document,        
    win = window;    
    var docEl = doc.documentElement;    
    var tid;    
    var rootItem,rootStyle;    
    function refreshRem() {        
        var width = docEl.getBoundingClientRect().width;        
        if (!maxWidth) {            
            maxWidth = 540;        
        };        
        if (width > maxWidth) {            
            width = maxWidth;        
        }        
        //与淘宝做法不同，直接采用简单的rem换算方法1rem=100px        
        var rem = width * 100 / designWidth;        
        //兼容UC开始        
        rootStyle="html{font-size:"+rem+'px !important}';        
        rootItem = document.getElementById('rootsize') || document.createElement("style");        
        if(!document.getElementById('rootsize')){        
            document.getElementsByTagName("head")[0].appendChild(rootItem);        
            rootItem.id='rootsize';        
        }        
        if(rootItem.styleSheet){        
            rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)        
        }else{        
            try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}        
        }        
        //兼容UC结束        
        docEl.style.fontSize = rem + "px";    
    };    
    refreshRem();//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；    
    win.addEventListener("resize", function() {        
        clearTimeout(tid); //防止执行两次        
        tid = setTimeout(refreshRem, 300);    
    }, false);    
    win.addEventListener("pageshow", function(e) {        
        if (e.persisted) { // 浏览器后退的时候重新计算            
            clearTimeout(tid);            
            tid = setTimeout(refreshRem, 300);        
        }    
    }, false);    
    if (doc.readyState === "complete") {        
        doc.body.style.fontSize = "16px";    
    } else {        
        doc.addEventListener("DOMContentLoaded", function(e) {            
            doc.body.style.fontSize = "16px";        
        }, false);    
    }
})(375, 1000);复制代码

zepto 

可以理解为移动端的 jQuery，用法与 jQuery 一样

jQuery 在移动端也可以用，但是存在以下问题：

（1）click延迟 300ms （2）jquery.min.js 有94k，消耗性能；

（1）tap 移动端的click事件
'singleTap' , 'longTap' $("button").on("tap",function(){ console.log(1)}) （
2）swipe 滑动事件 
'swipeLeft' , 'swipeRigth' , 'swipeUp' , 'swipeDown' , 'doubleTap',复制代码

$(".box").on("touchmove",function(e){                
    e.preventDefault() //swipe 是基于touch，所以必须先阻止掉touch事件            
})            
$("div").on("swipeDown",function(e){                
    console.log(3)            
})复制代码