移動端前端開發與PC端比有哪些不同？
我做PC端前端開發有1年左右，現在臨時有個移動端的項目。因為一直沒有正式接觸，所以來這裡問問知乎大神：
1，移動端在布局跟js效果方面，與PC端有什麼不同2，兼容性方面有哪些常見的坑要避免3，如何適配不同的解析度和屏幕尺寸4，如何測試5，哪裡有完整項目的開發視頻可以參考
我不想說具體的技術點差異，任何運行Web應用的容器都會存在實現差異，最終影響到Web的表現，無論是IE6、7、8，還是Android、iOS，這些差異一天一夜時間都總結不完。
排除移動端特有特性（硬體規格、感測器設備等）帶來的技術差異之外，移動端與PC端使用的技術本質上都是相同的，如果只考慮IE10+、Chrome這樣的現代瀏覽器，PC端提供給前端的空間只會更大，國情之下（IE10-）讓大多數PC前端開發沒辦法直接使用很多HTML5、CSS3的特性而已。
以下是幾個我自己總結的移動端開發的核心要點：
1、語義化，結構化
從以切圖為導向到以語義化為導向的頁面生產，使得頁面的結構和層次更加清晰。語義化的頁面通常也是結構化的，結構化的頁面更利於移動端做多解析度適配與多瀏覽器兼容。貼一篇我前兩天剛發布的文章《那些年我們一起切過的頁面》。由於移動設備屏幕實際顯示像素（物理像素 / 設備像素比 = 實際顯示像素）遠小於PC屏幕，導致移動Web通常在一屏之內沒辦法展示出需要的內容，這就會存在更多DOM顯示/隱藏的交互，結構化的頁面能更好的管理和操作DOM。
移動Web還需要適配不同解析度，解析度的變化（比如：橫豎屏切換）也可能會導致頁面DOM顯示/隱藏的交互。無論是上面說的JS操作DOM還是CSS3的Media Queries，語義化的、結構化的頁面都是更加的選擇。
2、移動設備特性
移動設備特性通常分為兩類：影響視覺的和影響觸覺的，很多具體的HTML5和CSS3技術就是為了適應移動設備特性的解決方案，包括：touch event、geolocation、orientation等。影響視覺包括：
- 屏幕解析度
- 設備像素比
視覺部分會直接影響設計稿和產出的圖片，也就是上面 @簡單 答案裡面提到的二倍圖、三倍圖。
影響觸覺包括：- 觸摸屏（用手指操作）
- 感測器（陀螺儀、GPS等）
- 軟鍵盤
觸覺部分會影響到人機交互輸入介面，像 @簡單 答案裡面提到的Touch手勢、滑動等都屬於輸入，還有其他的語音識別、GPS、方位感應等，對應的HTML5、CSS3技術實現可以查閱W3C的相關文檔。
3、瀏覽器（WebView）兼容
不要用理論解釋移動瀏覽器的兼容BUG，不要用理論解釋移動瀏覽器的兼容BUG，不要用理論解釋移動瀏覽器的兼容BUG，重要的事情說三遍，有好多BUG根本就是瀏覽器的實現缺陷導致，很多問題是無法繞過的，遇到這樣的問題只能盡量改進技術實現，但通常都沒有完美的技術解決方案，除非更改需求交互和設計，對於一些不是很嚴重的問題，我都會無視。
在一開始設計產品需求和細節時，就應當把一些技術性的問題考慮進來，盡量避免在測試階段或上線之後才發現，這通常需要很多的經驗積累才能做到，需要耐心慢慢來。
4、移動端調試
95%的調試可以在Chrome DevTools 移動設備模擬器下完成，剩下的5%才需要特殊的調試技巧，可以看這個問題的回答《怎麼在移動端調試web前端? - 計算機網路》。我現在比較熟悉移動Web開發，99%的調試都能在Chrome下完成。
5、關於測試
上面說的是開發調試，而非測試。測試是由專門的QA部門完成，目前移動端測試還沒有比較先進的測試手段（也許有我不知道而已，這塊需要多交流），基本都是靠人工。一定要限定測試運行環境，包括：機型、系統、瀏覽器（WebView），比如你的WebApp只是運行在微信或微博這樣的社交App中，那麼就只測試微信、微博WebView。如果不限制運行環境，那即將會是災難的開始，一是測試壓力非常大，二是更大概率的出現一些理論無法解釋的BUG，而修復這樣的BUG通常要花費80%的時間。
------------------------------
總的來說就是這些吧，涉及到一些具體的技術點可以看這裡 jtyjty99999/mobileTech · GitHub。第一次答題，隨便寫一點關於移動端比較坑的點，如有錯誤希望各位大神指正
關於移動端：
1、iPhone上submit按鈕bug：iPhone上的控制項（&
width:calc(100% - 10px);
width:-webkit-calc(100% - 10px);
width:-moz-calc(100% - 10px);
好處是可以很好的控制布局，把已知的寬度和整列寬度結合在一起使用，方便設置位置。
另外有些比較奇葩的手機遊覽器可能不兼容css3的屬性，這時你可以使用以下代碼來加強你代碼的健壯性@media screen and (max-width: 355px) { //寬度小於355px時
... //添加屬性
}
3、圖片的處理：由於各個設備的解析度不同，理論上需要切出不同設備大小的圖片，並且判斷當前設備的解析度再調用相對應的圖片。但操作起來實在是過於困難，所以一般都是使用同一張圖片來顯示。
===================補充時間：2015-08-11====================
我來說說calc()的兼容問題：calc()屬性也是近兩個月才使用的，目前僅有一台安卓的測試機放到我們自製的app平台上使用時無法讀取該樣式，該機器在自帶的遊覽器內看是可以正常顯示的。我們的處理方法是在使用calc()的上面寫上普通的樣式，例如：width:95%;
width:calc(100% - 10px);
width:-webkit-calc(100% - 10px);
width:-moz-calc(100% - 10px);
當遊覽器無法讀取樣式時會使用最上面的widht：95%;這樣會與實際設計稿有些許出入，所以使用時謹慎對待~
之後又時間還會繼續更新，感謝提出問題和意見我原來也是寫PC端，最近也剛開始寫移動端；下面簡單說下我自己的一點理解，請大神指教；
=======================割開正文=======================================
1，移動端在布局跟js效果方面，與PC端有什麼不同
先說布局方面：
PC端咱們最常用的就是固定寬度980px（也有960，1000,1200），然後水平居中width:980px;margin:0 auto;
但移動端就不能這麼用了，因為很多網頁都是可以橫屏看，也可以豎屏看；很多屏幕的解析度不一樣；
所以只要牽涉到移動端，就要牽涉到響應式（也叫自適應）；如果是只針對移動端的項目，我平時主要考慮的是320px寬 到 750px寬的兼容；
然後是js方面，這個題主你應該問的更詳細一些，因為有沒有canvas對js影響很大；
第一、普通移動端網頁（比如手機新浪網，手機淘寶，手機百度等）這個在js方面和PC端區別不是太大；主要的區別在於移動端沒有了滑鼠懸停（onmouseover）；點擊（onclick）還可以用；多了觸摸、滑動（這裡我沒自己寫過原生的，只會用一些插件）我常用的移動端插件：TouchSlide 觸屏滑動特效插件 大話主席Touch.jsSwiper中文網第二、canvas相關遊戲
canvas相關的html5增加了好多js，不過我不做遊戲方面，所以就不多廢話了；2，兼容性方面有哪些常見的坑要避免
這個和第一個、第三個都有重複，你再問的詳細些吧；
3，如何適配不同的解析度和屏幕尺寸
我說下我常用的（有任何不對的地方請大神指正）
原來沒有iPhone6和iPhone6 plus時，設計圖是640px寬的，切圖的時候就按照設計圖正常切圖；（按照標準的話，這裡切圖本來應該分成兩種，一種是320px寬一倍圖，一種是640px寬的二倍圖；然後普通屏幕用一倍圖，retina視網膜屏幕用 @2x 二倍圖，可是我們的設計師太懶了，只給我一個640px寬的二倍圖，這裡求大神指教該怎樣才能符合標準） 不過最後寫css的時候，不要按照640px寫，要按照320px寫；所有圖片和所有html標籤的尺寸都要減半；如果圖片img在設計圖上的寬度是80px，css就要width:40px;
如果一個按鈕設計圖上寬100px，你的css就要
width:50px;
後來有了iPhone6和iPhone6 plus，設計師給的設計圖就變成了750px，按說由「二倍」變成了「三倍」，但是我們的設計師比較懶，不願費事，所以現在我的解決方案還是按320px寬，img和所有html標籤css減半處理；
4，如何測試
我最常用的是chrome的手機模擬器；
右鍵-審查元素（或F12），developer tools出來後，點擊左上角那個手機；5，哪裡有完整項目的開發視頻可以參考
完整項目的開發視頻我還沒有見過，我比較喜歡在慕課網上面看一些html5和css3的知識點；
勸你有時間的話盡量接實戰項目吧，別總看視頻，做一個項目比看多少視頻都有用；回答 @Westfall You ： 650px也可以的，只要是在640px-750px都可以；下面是我常用的html和body的css；至於em和rem，我認為只有在單屏的app上面（不出現滾動條那種）；只要是出現滾動條的正常頁面，就還是用百分比和像素px吧；
html{height:100%;font-size:62.5%;-webkit-text-size-adjust:none;}
body{height:100%;max-width:750px;min-width:320px;margin:0 auto;color:#6b6b6b;padding:0;font:normal 1.2em/1.6 Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-serif;background-color:#f5f5f5;}
1. js事件不同：click事件在移動端反應有300ms延遲，點擊反應慢還會出現點透的bug。應嘗試使用touch事件，或者使用fastclick.js庫，也可以使用zeptojs中的tap事件。
2. 調試頁面：使用chrome的模擬移動端工具，有時還要使用weinre真機調試工具。微信開發請選擇微信開發者工具。
3. 需要設置viewport：在header里使用
&
來控制屏幕全屏顯示，且不能被縮放。
4. 字體規則：pc端使用的px在移動屏幕上不能很好的適應多解析度，移動端改用rem字體單位。令 html{ font-size:62.5%; }，則1rem=10px。然後使用css3的媒體查詢控制不同解析度下html顯示的倍數。
5. 最小點擊區域44px：移動端是有最小點擊識別區的，元素大小低於這個值時被點擊是不會觸發click事件的。
6. 可以調用硬體功能：可以通過設置a標籤href類型來實現撥打電話、發送簡訊和郵件等功能。可以通過&的accept 屬性，調用本地圖片或拍照。還可以使用html5的運動感測器數據事件實現微信搖一搖功能。
以上都是移動端和pc端的差異性，坑也提到了不少。如果想找學習資源，慕課網上有個《Hello，移動WEB》的教學視頻，講得挺好的。
記得的就這麼多了，以後想到再回來寫，希望對題主有用。斜眼笑 ：）
--------------------- 我是就是我，我不是分割線 -------------------------
（接之前的6條）
7. 忽略將頁面中的數字識別為電話號碼：
&
8. 屏幕旋轉事件：window.orientation，取值：正負90表示橫屏模式、0和180為豎屏模式
9. 虛擬鍵盤彈出導致 fixed 元素錯位：虛擬鍵盤彈出（即onfucos事件觸發）時將fixed改為static定位
10. 可點擊標籤點擊時有默認樣式：a, button, input, optgroup, select, textarea 等標籤點擊時會出現一個 "暗色的"背景，可以使用以下代碼去除
-webkit-tap-highlight-color: rgba(0,0,0,0);
最後，安利一波：
移動端web整理 移動端問題總結，移動web遇到的那些坑Safari瀏覽器以及ios的微信瀏覽器不支持事件冒泡到body上.所以$("body").on無效
現在的手機解析度千奇百怪，一次開發，多種適應的響應式布局已經成為主流，至少在我實際開發當中，對移動端的響應式和一些安卓和IOS平台的兼容性問題是很值得注意的···
pc端有ie,chrome,ff 內核兼容問題移動端，簡單來說兼容問題相對較少。但是移動端要做好多解析度的處理。
別用jquery！
老老實實的zepto！！1.布局方面，不清楚你是用PC端什麼語言寫GUI程序一年，如果Qt的QML的話，H5的前端設計應該很類似，如果是WinForm這類拖拖畫畫的，就區別比較大了，簡單來說，H5的前端布局HTML結構+CSS渲染+JS特效組成的。這個花點時間入門並有所產出並不難，難就難在現在市面上層出不窮的冒出了很多JS框架，比如React，Angular這些，看上去都很有想法，方便前端的組織管理，但是用起來確實比較難。建議不要一下子入坑那麼深，會吃不消的。
2.兼容性目前還好，已經過了最痛苦的那幾年，現在項目一般只要求在Chrome或者Firefox這些主流瀏覽器中適配了，IE特別是IE6已經沒什麼項目需要考慮。你只要注意移動客戶端的適配就行了。
3.第二點已經說了，需要適配移動客戶端，最主要的適配方式就是響應式布局，這是目前CSS渲染技術中應用最多的，不過目前有很多現成的CSS框架幫你解決，比如bootstrap，比如國產的AmazeUI等等。
4.調試和測試，前端一般使用Chrome的F12可以很方便調試和測試。如果你還需要測試一些後端服務，那麼postman是個不錯的選擇。
5.常見的一些教程網站基本都有系列的前端教程，比如慕課網，網易雲課堂，極客學院等。
width:320px max-width:960px
推薦閱讀：
※jQuery真的過時了嗎？
※amaze ui和bootstrap有哪些差別？
※有沒有適合HTML&CSS初學者模仿的靜態網頁？
※使用哪一個電腦？
※類似vue-cli這樣快速構建項目的腳手架是怎樣開發出來的？