自适应 or 移动前端页面布局的问题？

说出来，还请各位看官不要笑 - -、哥们至今不是很清楚页面的自适应和移动前端页面开发有什么区别 。有幸哪位看官清楚这些的话，希望能不吝赐教 。
A.meta
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
        不允许缩放
        <meta name="format-detection" content="telephone=no"/>
        IOS和Android系统默认超过5位的数字为电话号码，会给一个默认链接的样式，只能说丑。
        <meta name="apple-mobile-web-app-capable" content="yes" />
        删除默认的apple工具栏和菜单栏(或网站开启对 web app 程序的支持)
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        改变apple顶部状态条的颜色(或网站开启 web app 程序的支持后顶部状态条的颜色)
        默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）
        若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。
        <meta content="email=no" name="format-detection" />
        不识别邮箱
        以上只是部分常用的meta，用哪个，还是自己选择为好，不过我一般就只写1一个不允许缩放的，其他都不写的。
B.media query
        我认为media query其实就是对该页面的部分模块区域的再次重构，要考虑好在多大的分比率，页面如何呈现给用户。
        一般的分辨率写这些：1024 -- 980 -- 960 -- 800 -- 768 -- 737 -- 668 -- 640 -- 480 -- 415 -- 376 -- 360 -- 320。其中737、668、415、376分别是iPhone 6 Plus、iPhone 6的横屏分辨率，以及iPhone 6 Plus、iPhone 6的竖屏分辨率。因此，你懂的。
        可能有些人会说用不了这么多分辨率，但是我认为，要从公司所属行业，或说是从实际出发来考虑，我们公司是金融行业的，如果有一个分辨率的样式没有调整适应，恰恰某个潜在客户是这个分辨率的手持设备，那么就很可能流失这一个客户。
        假如很少使用media query的小伙伴看到这些的话，可能会想，这肯定会写很多很多的样式，但是当你从1024写到320的时候，你就会发现，这么多分辨率适应下来，也就跟你原本的css差不了多少的，我自己感觉还是挺实惠的。不过我前几次用media query的时候，也是醉了，是从最小的320开始，慢慢写到1024。。那一串一串的样式。。全是泪。。
C.浏览器篇
        简单粗暴的说，我最喜欢safari，和IE10/11；可以忍受的是微信/QQ的内置浏览器；勉强接受的是UC浏览器；直接忽略的是安卓系统自带的浏览器。
        因为safari，和IE10/11，将允许的使用各种css3，以及html5元素；微信/QQ的内置浏览器，因为我很少用微信和手机QQ，所以，也就偶尔测试一下，样式跟前面两个相差不大；UC只要不是在云加速模式下的话，对样式的支持也还可以；安卓4.X自带的浏览器，我只能说，它最起码不知道是background-size/border-radius等，更多的，大家自己试试吧，哥们比较懒，忘性也比较大。。以前也没有记录东西的习惯。。导致，现在写东西都是笼统的。。。
D.js库的选择
        jquery.js / jquery mobile / zepto.js，我推荐使用zepto.js，理由是体积小，专门针对移动端，用法与jquery基本一致。只是现在的项目情况，有点纠结，目前在考虑如何将jquery替换成zepto。
        jquery更适合的是pc端，还是让它在pc上发挥出自己的真正实力吧。
        jquery mobile，个人认为，功能太多，体积太大，因此不选择它。
E.事件的问题
        
        touchstart                 触摸开始（手指放在触摸屏上）
        touchmove         拖动（手指在触摸屏上移动）
        touchend                 触摸结束（手指从触摸屏上移开）
        touchcancel        在拖动中断时候触发。
        gesturestart        当有两根或多根手指放到屏幕上的时候触发 
        gesturechange        当有两根或多根手指在屏幕上，并且有手指移动的时候触发
        gestureend                当倒数第二根手指提起的时候触发
        屏幕旋转事件：onorientationchange，只有4种状态0，-90，90，180，正常，左转/右转横屏，反转180度
        function orientationChange() { 
                switch(window.orientation) { 
                        case 0:
                                code;
                        break; 
                        case -90:  
                                code;
                        break; 
                        case 90:    
                                code;
                        break; 
                        case 180:    
                                code;
                        break; 
                };
        };
        以上是我常用的一些事件，使用之前要先绑定事件，如：$('#myDiv').on('touchstart',function(e){alert("触摸开始");});
        或document.getElementById('myDiv')..addEventListener('touchstart',function () {alert("触摸开始");}); 
F.小提示
        a,button,input{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;}
        去掉手持设备点击时出现的透明层
        这些元素在移动端浏览器里面，点击的时候，会出现一层半透明的灰色层，极其不美观，但是，目前我只知道这个，能隐藏到ios和安卓上面的半透明层，WP平台的暂时不知道，如果有知道的小伙伴，麻烦留下言，三克油~！
        在此，还是希望有看官能够及时指点我这个菜鸟的移动端布局的各种迷津，先行谢过。