2013年底接觸移動端，簡單做下總結，首先了解下移動web帶來的問題
裝置更新換代快——低端機遺留下問題、高端機帶來新挑戰
浏覽器廠商不統一——相容問題多
網絡更複雜——弱網絡，頁面打開慢
低端機性能差——頁面操作卡頓
HTML5新技術多——學習成本不低
未知問題——坑多
面對這些問題，一開始我們隻能在未知中試錯，知道錯誤的方案才能更容易尋找正确的解決問題思路，2年多來，可看到移動web在業界不斷趨向于成熟，各種架構和解決方案不斷的湧現讓移動端開發不再是個噩夢。
這幾天把想到的一點經驗先羅列出來，後續會持續更新，這篇文章可以給剛接觸webapp開發的同學帶來幫助，任何疑問歡迎留言探讨~
<a href="https://zyl.me/blog/100#meta">meta基礎知識</a>
<a href="https://zyl.me/blog/100#meta_1">H5頁面視窗自動調整到裝置寬度，并禁止使用者縮放頁面</a>
<a href="https://zyl.me/blog/100#meta_2">忽略将頁面中的數字識别為電話号碼</a>
<a href="https://zyl.me/blog/100#meta_3">忽略Android平台中對郵箱位址的識别</a>
<a href="https://zyl.me/blog/100#meta_5">将網站添加到主螢幕快速啟動方式，僅針對ios的safari頂端狀态條的樣式</a>
<a href="https://zyl.me/blog/100#question">常見問題</a>
<a href="https://zyl.me/blog/100#question_1">移動端如何定義字型font-family</a>
<a href="https://zyl.me/blog/100#question_4">移動端click螢幕産生200-300 ms的延遲響應</a>
<a href="https://zyl.me/blog/100#question_5">觸摸事件的響應順序</a>
<a href="https://zyl.me/blog/100#question_6">什麼是Retina 顯示屏，帶來了什麼問題</a>
<a href="https://zyl.me/blog/100#question_7">ios系統中元素被觸摸時産生的半透明灰色遮罩怎麼去掉</a>
<a href="https://zyl.me/blog/100#question_8">部分android系統中元素被點選時産生的邊框怎麼去掉</a>
<a href="https://zyl.me/blog/100#question_9">winphone系統a、input标簽被點選時産生的半透明灰色背景怎麼去掉</a>
<a href="https://zyl.me/blog/100#question_10">webkit表單元素的預設外觀怎麼重置</a>
<a href="https://zyl.me/blog/100#question_11">webkit表單輸入框placeholder的顔色值能改變麼</a>
<a href="https://zyl.me/blog/100#question_12">webkit表單輸入框placeholder的文字能換行麼</a>
<a href="https://zyl.me/blog/100#question_13">IE10（winphone8）表單元素預設外觀如何重置</a>
<a href="https://zyl.me/blog/100#question_14">禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載下傳圖檔</a>
<a href="https://zyl.me/blog/100#question_15">禁止ios和android使用者選中文字</a>
<a href="https://zyl.me/blog/100#question_16">打電話發短信寫郵件怎麼實作</a>
<a href="https://zyl.me/blog/100#question_17">模拟按鈕hover效果</a>
<a href="https://zyl.me/blog/100#question_18">螢幕旋轉的事件和樣式</a>
<a href="https://zyl.me/blog/100#question_19">audio元素和video元素在ios和andriod中無法自動播放</a>
<a href="https://zyl.me/blog/100#question_20">搖一搖功能</a>
<a href="https://zyl.me/blog/100#question_21">手機拍照和上傳圖檔</a>
<a href="https://zyl.me/blog/100#question_22">微信浏覽器使用者調整字型大小後頁面矬了，怎麼阻止使用者調整</a>
<a href="https://zyl.me/blog/100#question_23">消除transition閃屏</a>
<a href="https://zyl.me/blog/100#question_24">開啟硬體加速</a>
<a href="https://zyl.me/blog/100#question_25">取消input在ios下，輸入的時候英文首字母的預設大寫</a>
<a href="https://zyl.me/blog/100#question_26">android上去掉語音輸入按鈕</a>
<a href="https://zyl.me/blog/100#question_27">android 2.3 bug</a>
<a href="https://zyl.me/blog/100#question_28">android 4.x bug</a>
<a href="https://zyl.me/blog/100#question_29">設計高性能CSS3動畫的幾個要素</a>
<a href="https://zyl.me/blog/100#question_30">fixed bug</a>
<a href="https://zyl.me/blog/100#question_31">如何阻止windows Phone的預設觸摸事件</a>
<a href="https://zyl.me/blog/100#api">常用的移動端架構</a>
<a href="https://zyl.me/blog/100#api_zepto">zepto.js</a>
<a href="https://zyl.me/blog/100#api_iscroll">iscroll.js</a>
<a href="https://zyl.me/blog/100#api_underscore">underscore.js</a>
<a href="https://zyl.me/blog/100#api_slide">滑屏架構</a>
<a href="https://zyl.me/blog/100#api_FastClick">FastClick</a>
<a href="https://zyl.me/blog/100#seajs">Sea.js</a>
體驗demo，解決在主螢幕打開頁面後，點選頁面連結不會跳轉到系統自帶的Safari
viewport模闆——通用
<a></a>
viewport模闆 - target-densitydpi=device-dpi，android 2.3.5以下版本不支援
中文字型使用系統預設即可，英文用Helvetica
對于隻需要适配少部分手機裝置，且分辨率對頁面影響不大的，使用px即可
對于需要适配各種移動裝置，使用rem，例如隻需要适配iPhone和iPad等分辨率差别比較挺大的裝置
rem配置參考：
當使用者手指放在移動裝置在螢幕上滑動會觸發的touch事件
以下支援webkit
touchstart——當手指觸碰螢幕時候發生。不管目前有多少隻手指
touchmove——當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面，會調用event的preventDefault()可以阻止預設情況的發生：阻止頁面滾動
touchend——當手指離開螢幕時觸發
touchcancel——系統停止跟蹤觸摸時候會觸發。例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用
TouchEvent
touches：螢幕上所有手指的資訊
targetTouches：手指在目标區域的手指資訊
changedTouches：最近一次觸發該事件的手指資訊
touchend時，touches與targetTouches資訊會被删除，changedTouches儲存的最後一次的資訊，最好用于計算手指資訊
參數資訊(changedTouches[0])
clientX、clientY在顯示區的坐标
target：目前元素
以下支援winphone 8
MSPointerDown——當手指觸碰螢幕時候發生。不管目前有多少隻手指
MSPointerMove——當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面，會調用css的html{-ms-touch-action: none;}可以阻止預設情況的發生：阻止頁面滾動
MSPointerUp——當手指離開螢幕時觸發
移動裝置上的web網頁是有300ms延遲的，玩玩會造成按鈕點選延遲甚至是點選失效。
以下是曆史原因，來源一個公司内一個同僚的分享：
2007年蘋果釋出首款iphone上IOS系統搭載的safari為了将适用于PC端上大螢幕的網頁能比較好的展示在手機端上，使用了輕按兩下縮放(double tap to zoom)的方案，比如你在手機上用浏覽器打開一個PC上的網頁，你可能在看到頁面内容雖然可以撐滿整個螢幕，但是字型、圖檔都很小看不清，此時可以快速輕按兩下螢幕上的某一部分，你就能看清該部分放大後的内容，再次輕按兩下後能回到原始狀态。
輕按兩下縮放是指用手指在螢幕上快速點選兩次，iOS 自帶的 Safari 浏覽器會将網頁縮放至原始比例。
原因就出在浏覽器需要如何判斷快速點選上，當使用者在螢幕上單擊某一個元素時候，例如跳轉連結，此處浏覽器會先捕獲該次單擊，但浏覽器不能決定使用者是單純要點選連結還是要輕按兩下該部分區域進行縮放操作，是以，捕獲第一次單擊後，浏覽器會先Hold一段時間t，如果在t時間區間裡使用者未進行下一次點選，則浏覽器會做單擊跳轉連結的處理，如果t時間裡使用者進行了第二次單擊操作，則浏覽器會禁止跳轉，轉而進行對該部分區域頁面的縮放操作。那麼這個時間區間t有多少呢？在IOS safari下，大概為300毫秒。這就是延遲的由來。造成的後果使用者純粹單擊頁面，頁面需要過一段時間才響應，給使用者慢體驗感覺，對于web開發者來說是，頁面js捕獲click事件的回調函數處理，需要300ms後才生效，也就間接導緻影響其他業務邏輯的處理。
解決方案：
fastclick可以解決在手機上點選事件的300ms延遲
zepto的touch子產品，tap事件也是為了解決在click的延遲問題
解決300ms延遲的問題，也可以通過綁定ontouchstart事件，加快對事件的響應
retina：一種具備超高像素密度的液晶屏，同樣大小的螢幕上顯示的像素點由1個變為多個，如在同樣帶下的螢幕上，蘋果裝置的retina顯示屏中，像素點1個變為4個
在高清顯示屏中的位圖被放大，圖檔會變得模糊，是以移動端的視覺稿通常會設計為傳統PC的2倍
那麼，前端的應對方案是：
設計稿切出來的圖檔長寬保證為偶數，并使用backgroud-size把圖檔縮小為原來的1/2
其它元素的取值為原來的1/2，例如視覺稿40px的字型，使用樣式的寫法為20px
ios使用者點選一個連結，會出現一個半透明灰色遮罩, 如果想要禁用，可設定-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最後一位設定為0就可以去除半透明灰色遮罩
android使用者點選一個連結，會出現一個邊框或者半透明灰色遮罩, 不同生産商定義出來額效果不一樣，可設定-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果
-webkit-user-modify有個副作用，就是輸入法不再能夠輸入多個字元
另外，有些機型去除不了，如小米2
對于按鈕類還有個辦法，不使用a或者input标簽，直接用div标簽
ios可以，android不行~
在textarea标簽下都可以換行~
禁用 select 預設下拉箭頭
::-ms-expand 适用于表單選擇控件下拉箭頭的修改，有多個屬性值，設定它隐藏 (display:none) 并使用背景圖檔來修飾可得到我們想要的效果。
禁用 radio 和 checkbox 預設樣式
::-ms-check 适用于表單複選框或單選按鈕預設圖示的修改，同樣有多個屬性值，設定它隐藏 (display:none) 并使用背景圖檔來修飾可得到我們想要的效果。
禁用PC端表單輸入框預設清除按鈕
當表單文本輸入框輸入内容後會顯示文本清除按鈕，::-ms-clear 适用于該清除按鈕的修改，同樣設定使它隐藏 (display:none) 并使用背景圖檔來修飾可得到我們想要的效果。
打電話
發短信，winphone系統無效
移動端觸摸按鈕的效果，可明示使用者有些事情正要發生，是一個比較好體驗，但是移動裝置中并沒有滑鼠指針，使用css的hover并不能滿足我們的需求，還好國外有個激活css的active效果，代碼如下，
相容性ios5+、部分android 4+、winphone 8
要做到全相容的辦法，可通過綁定ontouchstart和ontouchend來控制按鈕的類名
window.orientation，取值：正負90表示橫屏模式、0和180表現為豎屏模式；
應對方案：觸屏即播
HTML5 deviceMotion：封裝了運動傳感器資料的事件，可以擷取手機運動狀态下的運動加速度等資料。
的accept 屬性
使用總結：
ios 有拍照、錄像、選取本地圖檔功能
部分android隻有選取本地圖檔功能
winphone不支援
input控件預設外觀醜陋
原因
android側是複寫了layoutinflater 對textview做了統一處理
ios側是修改了body.style.webkitTextSizeAdjust值
android使用以下代碼，該接口隻在微信浏覽器下有效(感謝jationhuang同學提供)
ios使用-webkit-text-size-adjust禁止調整字型大小
最好的解決方案：
整個頁面用rem或者百分比布局
網絡都是這麼寫的，但我并沒有測試出來
解決頁面閃白
保證動畫流暢
@-webkit-keyframes 需要以0%開始100%結束，0%的百分号不能去掉
after和before僞類無法使用動畫animation
border-radius不支援%機關
translate百分比的寫法和scale在一起會導緻失效，例如-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)
三星 Galaxy S4中自帶浏覽器不支援border-radius縮寫
同時設定border-radius和背景色的時候，背景色會溢出到圓角以外部分
部分手機(如三星)，a連結支援滑鼠:visited事件，也就是說連結通路後文字變為紫色
android無法同時播放多音頻audio
盡可能地使用合成屬性transform和opacity來設計CSS3動畫，不使用position的left和top來定位
利用translate3D開啟GPU加速
ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位
android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位
ios4下不支援position:fixed
解決方案
可用isroll.js，暫無完美方案
參考
winphone下預設觸摸事件事件使用e.preventDefault是無效的
目前解決方法是使用樣式來禁用
文法與jquery幾乎一樣，會jquery基本會zepto~
最新版本已經更新到1.16
常使用的擴充子產品：
解決頁面不支援彈性滾動，不支援fixed引起的問題~
實作下拉重新整理，滑屏，縮放等功能~
最新版本已經更新到5.0
筆者沒用過，不過聽說好用，推薦給大家~
該庫提供了一整套函數式程式設計的實用功能，但是沒有擴充任何JavaScript内置對象。
最新版本已經更新到1.8.2
适合上下滑屏、左右滑屏等滑屏切換頁面的效果
<a href="https://github.com/peunzhang/slip.js" target="_blank">slip.js</a>
<a href="https://github.com/peunzhang/iSlider" target="_blank">iSlider.js</a>
<a href="https://github.com/peunzhang/fullpage" target="_blank">fullpage.js</a>
<a href="http://www.swiper.com.cn/" target="_blank">swiper.js</a>
flex布局目前可使用在移動中，并非所有的文法都全相容，但以下寫法筆者實踐過，效果良好~
示例：兩端對齊
使用注意：
flex下的子元素必須為塊級元素，非塊級元素在android2.3機器下flex失效
flex下的子元素寬度和高度不能超過父元素，否則會導緻子元素定位錯誤，例如水準垂直居中
參考：
<a href="http://the-echoplex.net/flexyboxes/" target="_blank">flexyboxes</a>
<a href="http://www.w3cplus.com/css3/old-flexbox-and-new-flexbox.html" target="_blank">“老”的Flexbox和“新”的Flexbox</a>
<a href="http://www.w3cplus.com/css3/advanced-cross-browser-flexbox.html" target="_blank">跨浏覽器的Flexbox</a>
消除在移動浏覽器上觸發click事件與一個實體Tap(敲擊)之間的300延遲
提供簡單、極緻的子產品化開發體驗
自然直覺的代碼組織方式：依賴的自動加載、配置的簡潔清晰，可以讓我們更多地享受編碼的樂趣。