1.input placeholder問題
在chrome 模擬移動端除錯時［左邊圖］，顯示的非常正常，但是在真機上［右邊圖］，placeholder裡面的內容明顯靠上，非常的不美觀
在國外**，對這個屬性的相容性處理，那就是不要設計input的line-height或者設定line-height為normal即可，
試了一下，雖然在谷歌模擬除錯裡稍微偏上，但是在「真機上」正常垂直居中～
line-height經常用於文字居中，不同手機顯示效果不一樣。什麼鬼～
解決方案：稍微大一點的高度，最好把line-height設定為高度+1px，兩個平台顯示都不會太『奇怪』。
原理：瀏覽器的預設字型高都是16px，未經調整的瀏覽器在顯示1em=16px。rem則是只相對於根元素的font-size，即只需要設定根元素的font-size，其它元素使用rem單位設定成相應的百分比即可；
一般使用：設定html的font-size為62.5%
1 html由於select移動端原生樣式很醜，但是原生彈出樣式是符合我們設計的原則4 body
8 p
解決方法：將原本select 設定為透明，z-index設定高～再用乙個比較好看的樣式『假裝』在表面
使用innerhtml繪製大段，之後想獲取html的id節點，事實上是獲取不到的，這種問題在動態建立dom會經常發生
解決方案：嘗試了很多方法之後，老老實實在頁面直接用html結構，如果有更好的方法，也請告訴我。
在html文件頭部包含如下meta標籤時：
缺點------就是必須通過完全禁用縮放來達到去掉點選延遲的目的，然而完全禁用縮放並不是我們的初衷，我們只是想禁掉預設的雙擊縮放行為，這樣就不用等待300ms來判斷當前操作是否是雙擊。
如果設定了上述meta標籤，那瀏覽器就可以認為該**已經對移動端做過了適配和優化，就無需雙擊縮放操作了。
這個方案相比方案一的好處在於，它沒有完全禁用縮放，而只是禁用了瀏覽器預設的雙擊縮放行為，但使用者仍然可以通過雙指縮放操作來縮放頁面。
相容性問題：
對於方案一和方案二，chrome是率先支援的，firefox緊隨其後，然而令safari頭疼的是，它除了雙擊縮放還有雙擊滾動操作，如果採用這種兩種方案，那勢必連雙擊滾動也要一起禁用。
問題常見發生場景： 假如頁面上有兩個元素a和b。b元素在a元素之上。我們在b元素的touchstart事件上註冊了乙個**函式，該**函式的作用是隱藏b元素。我們發現，當我們點選b元素，b元素被隱藏了，隨後，a元素觸發了click事件。
這是因為在移動端瀏覽器，事件執行的順序是touchstart > touchend > click。
而click事件有300ms的延遲，當touchstart事件把b元素隱藏之後，隔了300ms，瀏覽器觸發了click事件，但是此時b元素不見了，所以該事件被派發到了a元素身上。如果a元素是乙個鏈結，那此時頁面就會意外地跳轉。
解決思路：
1.不要混用touch和click
2.消耗掉touch之後的click
解決方法：
1.只用touch 把頁面內所有click全部換成touch事件（ touchstart 、』touchend』、』tap』），注意：a標籤的href也是click，需要換成js的跳轉。
2.改動最小——350ms後再隱藏b元素
fixed元素一定會伴隨虛擬鍵盤的出現，但是虛擬鍵盤只是「貼」在了viewport上，表面上不會對dom產生「任何」影響，但是這個時候fixed元素表現卻變得怪異起來，會錯位。
解決原理：虛擬鍵盤彈出時將fixed元素設定為static，虛擬鍵盤消失時候設定回來。
解決方案：由於虛擬鍵盤出現並未丟擲事件，而檢測scroll或者resize事件，皆會有一定延遲，會出現閃爍現象。則當前獲取焦點元素為文字元素，就將fixed元素設定為static。
手指放在螢幕上：ontouchstart 手指在螢幕上滑動：ontouchmove 手指離開螢幕：ontouchend
原理：1.在touchstart事件觸發時， 記錄手指按下的時間starttime，本次滑動的初始位置initialpos。
2.在touchmove事件觸發時， 記錄當前位置nowposition（實時移動元素），滑動距離moveposition（當前位置nowposition與初始位置initialpos的差值），判斷正負數再決定是左還是右移動。
3.在touchend事件觸發時， 記錄手指離開螢幕的時間endtime，獲得手指在螢幕上停留的時間（endtime－starttime），滑動距離moveposition
10.iphone動態生成html元素click失效
這個也是神奇的坑，找了很久資料，也沒有很原理的解釋。
解決方法： 為繫結click的元素增加css樣式 cursor：pointer；
移動開發實踐及 坑 總結
又一次懶癌發作，好久沒有更新部落格了。做過很多移動端的專案，在開發除錯過程中，一款好的除錯工具會讓效率大大提高。博主之前已經推薦了一款神器 下面，就總結一下移動端遇見的坑。1.input placeholder問題 在chrome 模擬移動端除錯時 左邊圖 顯示的非常正常，但是在真機上 右邊圖 pl...
移動Web開發實踐
移動裝置的快速發展給使用者帶來了很大的便利。使用者使用android iphone和其它移動裝置很容易接入網際網路。移動裝置對網頁的效能要求比較高，下面就說說mobile web開發的一些心得。當你用iphone訪問乙個沒有面向移動裝置優化過的 時 最好選取960px寬度的 你會發現iphone上面...
移動web開發填坑（一）
上週開始接觸移動web開發，默默的掉進了很多坑裡面。本文主要總結本週遇到的坑以及如何填坑。1 px與rem換算。設計稿的寬度一般是640px，而iphone是320px，所以測量設計稿的結果首先要除2，這時的單位還是px，下一步要轉換成rem，怎麼轉換呢？得看根節點怎麼設定的。首先，任意瀏覽器的預設...