第一次接觸移動端開發，發現web端和移動端的差別還是很大的，我主要記錄移動端的一些內容：
純粹是個人看法。
在web端是盡可能地展示豐富的功能，並且較為複雜，乙個頁面可以包含很多的內容。當然在互動方面也是相對複雜些，一般不是直接把「下一步」放在使用者面前，而是讓使用者自己去找。
而移動端設計應以簡約為主,乙個頁面可能只有乙個功能，並且操作起來一定要便捷。**量不能太大，不然載入起來速度會比較慢。
在開始移動端的開發前，我先蒐羅了別人寫的部落格，感覺有幾篇文章還是不錯的，分享出來給大家看看。
手機/移動前端開發需要注意的20個要點
「移動端」宴席知多少
移動web前端開發時注意事項
組長的要求還是比較嚴格的，希望移動端，web端都能相容。於是我真的做了非常多的嘗試。
由於移動端的瀏覽器大多數都是基於webkit核心的，因此對css3和html5的支援都比較好。所以大家可以放心的用了。這裡推薦乙個**，可以驗證相容性的，感覺很好用：can i use.
box-sizing真是救世主般的存在。
有時候明明設定了寬度、高度，可突然發現後面需要加padding、border了，可是我想保持總的寬度和高度怎麼辦？這個時候box-sizing就可以發揮妙用了。box-sizing:border-box，這下padding和border都可以被算到width裡了。如果還想按照原來的，那就設定為content-box就行了。
一般web端使用px，但移動端一般多會採用em和rem，讓單位成為乙個不是固定數值的而是乙個比例。
這方面可以多看看文章。
不用換的作為背景的那就直接用background:url();另外還可以設定是否repeat，以及background-size和background-position等。
但是要換的一定不能放在css裡面，不然就改不了了。
touchmove: //手指在螢幕上滑動式觸發
touchend: //手指離開螢幕時觸發
touchcancel: //系統取消touch事件的時候觸發，這個好像比較少用
每個觸控事件被觸發後，會生成乙個event物件，event物件裡額外包括以下三個觸控列表
touches: //當前螢幕上所有手指的列表
targettouches: //當前dom元素上手指的列表，盡量使用這個代替touches
changedtouches: //涉及當前事件的手指的列表，盡量使用這個代替touches
.cube
.cube
.cube
使用gpu可能會導致嚴重的效能問題，因為它增加了記憶體的使用，而且它會減少移動端裝置的電池壽命。
並且經過親測，靈敏度略有提高，但還是達不到理想的效果。
（博主的手機也不差吧，努比亞z9max，希望大家可以把測試的結果告訴我哦）
別一棍子打死，認為瀏覽器預設的就無法改變。
首先可以考慮取消瀏覽器預設事件，其他的事件也可以阻止。
在iphone中很好解決，只要給長按的div設定兩個css：
-webkit-user-select: none;/*禁用手機瀏覽器的使用者選擇功能 */
-moz-user-select: none;
window.ontouchstart = function(e) ;
document.oncontextmenu = function();
移動端相容
1.ios上click點選事件會有300ms的延遲響應 換用zepto的touch模組，tap事件也是為了解決在click的延遲問題 2.一些情況下對非可點選元素如 label,span 監聽click時間，ios下不會觸發 css增加cursor poiner就搞定了 3.移動端頁面滾動滯澀感 c...
移動端相容總結
系統型別相容 ios 安卓 廠商 微軟 js 可以判斷 嗅探功能 系統版本相容 ios10 11 12 低版本不考慮 裝置相容 4 5 6 x pluspad等 螢幕解析度 尺寸相容 rem media bs flexible.js 手機 團隊 瀏覽器版本相容 qq 瀏覽器哪個版本 低版本不考慮 解...
移動端相容問題
1.移動端檔名不要用game等，以防被合作伺服器劫持插入廣告，從而影響專案執行 2.紅公尺手機，ua返回iphone，需要結合platform判斷，但是還不準確，導致需要ios和android區別對待的時候就坑了。3.是fixed的問題。這個解決辦法是盡量不要用，不過ios7及以下才會出現這個問題。...