自適應 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。其中73七、66八、41五、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平臺的暫時不知道，若是有知道的小夥伴，麻煩留下言，三克油~！
        在此，仍是但願有看官可以及時指點我這個菜鳥的移動端佈局的各類迷津，先行謝過。