移動Web資源管理：http://www.cnblogs.com/PeunZhang/p/3407453.html#question_17
Web App優化整理：http://www.cnblogs.com/yexiaochai/p/3759959.html
web移動端常見問題解決方案：http://www.html5cn.org/article-9314-1.html
響應式設計方案分析：http://blog.csdn.net/uikoo9/article/details/46555751
單頁webapp應用開發（SPA架構）：http://my.oschina.net/maomi/blog/183790?p=1#OSC_h4_15
移動端頁面開發資源總結：http://www.imooc.com/article/1542
Zepto使用注意事項：http://www.cnblogs.com/samwu/archive/2013/06/06/3121649.html
移動端下拉刷新插件：http://www.cnblogs.com/duanhuajian/archive/2013/04/08/3008323.html https://github.com/ximan/dropload
移動webapp觸摸滑動最優解決方案：http://be-fe.github.io/iSlider/#demo http://www.swiper.com.cn/
移動端的fullPage.js：https://github.com/yanhaijing/zepto.fullpage
適應手機端的jQuery圖片滑塊動畫：http://www.html5cn.org/article-7151-1.html
移動端自適應圖片大小：http://www.w3cplus.com/css/flexible-images.html
經過padding-bottom或者padding-top實現等比縮放響應式圖片：http://www.cnblogs.com/websalon/p/3602324.html
純CSS解決移動端自適應組件：http://www.alloyteam.com/2016/01/let-see-css-world/
模塊、圖片、背景圖片、視頻等響應式(寬高等比縮放)佈局：http://ons.me/493.html
移動端Web開發調試之Chrome遠程調試：http://blog.csdn.net/freshlover/article/details/4252864
head標籤部分添加如下代碼：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> css
<meta name="renderer" content="webkit|ie-comp|ie-stand">html
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no,email=no" name="format-detection">
<!--[if lt IE 9]>
<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
第一個meta標籤表示：強制讓文檔的寬度與設備的寬度保持1:1，文檔初始化縮放比例是1:1，不容許用戶點擊屏幕放大瀏覽，容許用戶縮放到的最大比例。尤爲要注意的是content裏多個屬性的設置必定要用分號+空格來隔開，若是不規範將不會起做用。其餘屬性有：width;height; initial-scale; minimum-scale; maximum-scale; user-scalable;
第二個meta標籤是iphone設備中的safari私有meta標籤，它表示：容許全屏模式瀏覽；
第三個meta標籤也是iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式；
第四個meta標籤表示：告訴設備不識別郵件和忽略將頁面中的數字識別爲電話號碼
常見問題：
1.移動端建議用硬件加速的屬性，而不是直接用margin。（transition移動一個div，margin會卡頓）
2.IE8或者更老的瀏覽器不支持媒體查詢。你可使用media-queries.js或者respond.js來在IE中添加對媒體查詢的支持。
3.大部分4.7-5寸設備的viewport寬設爲360px；5.5寸設備設爲400px；iphone6設爲375px；ipone6 plus設爲414px。
4.viewport：能優化移動瀏覽器的顯示。若是不是響應式網站，不要使用initial-scale或者禁用縮放。
5.雖然移動端不用寫:hover，但光寫個:active是不夠的。實測Android 2.3下按過的按鈕會留下瀏覽器默認顏色，因此記得給:visited也加個顏色。
6.遇到寫動畫animation的時候，不要用到僞類上。否則Android是沒效果的。
7.用Flexbox作等分時，記得給寬度。否則Android裏若是內容字數不同，會撐開。
8.在ios的safari，click的捕獲被認爲和滾屏、點擊輸入框彈起鍵盤等同樣，是一種瀏覽器默認行爲，便可以被event.preventDefault()阻止的行爲。
9.position:fixed在手機裏面兼容性不是很好，尤爲是在UC裏面，若是要求比較高的話，老老實實用JS寫吧。
10.-webkit-tap-highlight-color:
這個屬性只用於iOS (iPhone和iPad)。當你點擊一個連接或者經過Javascript定義的可點擊元素的時候，它就會出現一個半透明的灰色背景。要重設這個表現，你能夠設置-webkit-tap-highlight-color爲任何顏色。想要禁用這個高亮，設置顏色的alpha值爲0便可，即rgba(0,0,0,0)。
11.讓html中的文本不可選，禁用長按圖片彈出保存的菜單：
img{-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
12.開發中經常使用自定義滾動條效果：::-webkit-scrollbar:{width:8px;height:8px;}//血槽寬度
::-webkit-scrollbar-thumb{border-raidus:3px;}//拖動條
::-webkit-scrollbar-track{border-radius:6px;}//背景槽
IOS原生滾動回調效果：-webkit-overflow-scrolling:touch;
13.HTML+JS完成觸屏動做的識別：http://bbs.html5cn.org/thread-84163-1-1.html
14.爲了不fixed在IOS上顯示錯位的問題，佈局能夠採用 page{position:absolute;left:0;right:0;top:0;bottom:0;}絕對定位首先於父級，page要想拉伸，須要加上html,body{height:100%;}
15.在用戶輸入號碼的表單中，須要禁止用戶輸入中文、符號等，減小用戶輸入出錯誤的可能性,
因而在全局樣式中定義以下：前端
.ime-disabled{ime-mode:disabled;}/* 屏蔽輸入法 */html5
在頁面定義以下：ios
<input type="text" name="password" class="ime-disabled" >css3
16.使得外層元素內容（包括圖片）居中：
外層元素{
position: absolute;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
}
或
外層元素{
display: table-cell;
vertical-align: middle;
}
17.解決字形圖標在低端手機上不顯示的問題，只需調整一下src地址的順序便可：
@font-face {
font-family: "iconfont";
src: url('icons.eot?ixsnn2');
src: url('icons.svg?ixsnn2#icomoon') format('svg'),
url('icons.eot?#iefixixsnn2') format('embedded-opentype'),
url('icons.ttf?ixsnn2') format('truetype'),
url('icons.woff?ixsnn2') format('woff');
url('icons.woff2?ixsnn2') format('woff2');
}
18.儘量使用CSS動畫，不少的CSS動畫是用GPU處理的，所以動畫自己很流暢，CSS動畫比起JavaScript驅動的動畫效率更高
.myAnimation {
animation: someAnimation 1s;
transform: translate3d(0, 0, 0); /* 強制硬件加速 */
}git
注：使用3D硬件加速提高動畫性能時，最好給元素增長一個z-index屬性，人爲干擾複合層的排序，能夠有效減小chrome建立沒必要要的複合層，提高渲染性能，移動端優化效果尤其明顯。github
19.移動端製做遇到的坑：http://caibaojian.com/mobile-web-app-fix.htmlweb
20.移動端Fixed佈局的解決方案：http://caibaojian.com/mobile-position-fixed.html?wb chrome
21.HTML5 項目常見問題及注意事項：http://orangexc.xyz/2016/07/30/Common-problems-and-matters-needing-attention-in-HTML5-project/
22.衆所周知，PS設計行業字體單位有像素、點、磅等單位，咱們這裏以像素爲例子，而所謂的間距「-100、-7五、-50。。。0。。。50、7五、100」，這些實際上是個相對關係和實際字體大小相關，文字字體越大實際間距也就越大，反之就越小。
實際像素大小 real_letter_spacing(單位爲px）
文字字號 font-size(單位爲px）
文字間距 spacing
它們的換算關係爲：
real_letter_spacing = font-size * 10 / spacing
若是一段文字的字號爲23px， 間距爲100，那麼實際間距爲23px * 10 / 100 = 2.3px。
從而得出前端字體間距設置2.3px方可與設計圖效果一致，實際測試也是如此，stype ="letter-spacing:2px";
23.針對HTML5 video "autoplay"沒法自動播放的問題解決辦法是：在video標籤中添加muted屬性，即<video muted src="" autoplay loop></video>