1. webkit內核中的一些私有的meta標籤
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
- 第一個meta標籤表示：強制讓文檔的寬度與設備的寬度保持1:1，並且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽；
- 第二個meta標籤是iphone設備中的safari私有meta標籤，它表示：允許全屏模式瀏覽
- 第三個meta標籤也是iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式；
- 第四個meta標籤表示：告訴設備忽略將頁面中的數字識別爲電話號碼。
2.塊級化a標籤
請保證將每條數據都放在一個a標籤中，爲何這樣做？因爲在觸控手機上，爲提升用戶體驗，儘可能的保證用戶的可點擊區域較大
3.自適應佈局模式
在編寫CSS時，我不建議前端工程師把容器（不管是外層容器還是內層）的寬度定死。爲達到適配各種手持設備，我建議前端工程師使用自適應佈局模式（支付寶採用了自適應佈局模式），因爲這樣做可以讓你的頁面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能夠正常的顯示，你無需再次考慮設備的分辨率。
4.ios和android下觸摸元素時出現半透明灰色遮罩
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
5.Retina屏的1px邊框
Element{
border-width: thin;
}
6.IOS中input鍵盤事件keyup、keydown、keypress支持不是很好
用input search做模糊搜索的時候，在鍵盤裏面輸入關鍵詞，會通過ajax後臺查詢，然後返回數據，然後再對返回的數據進行關鍵詞標紅。用input監聽鍵盤keyup事件，在安卓手機瀏覽器中是可以的，但是在ios手機瀏覽器中變紅很慢，用輸入法輸入之後，並未立刻相應keyup事件，只有在通過刪除之後才能相應！
解決辦法：
可以用html5的oninput事件去代替keyup
<input type="text" id="testInput">
<script type="text/javascript">
document.getElementById('testInput').addEventListener('input', function(e){
var value = e.target.value;
});
</script>
7.防止手機中網頁放大和縮小，這點是最基本的，最爲手機網站開發者來說應該都知道的，就是設置meta中的viewport
還有就是，有些手機網站我們看到如下聲明：
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile1.0//EN""http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
設置了DTD的方式是XHTML的寫法，假如我們頁面運用的是html5，可以不用設置DTD,直接聲明。
使用viewport使頁面禁止縮放。 通常把user-scalable設置爲0來關閉用戶對頁面視圖縮放的行爲。
<meta name="viewport" content="user-scalable=0" />
但是爲了更好的兼容，我們會使用完整的viewport設置。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
當然，user-scalable=0,有的人也寫成user-scalable=no，都可以的。
8.上下拉動滾動條時卡頓、慢
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
9.如何解決盒子邊框溢出
當你指定了一個塊級元素時，並且爲其定義了邊框，設置了其寬度爲100％。在移動設備開發過程中我們通常會對文本框定義爲寬度100％，將其定義爲塊級元素以實現全屏自適應的樣式，但此時你會發現，該元素的邊框(左右)各1個像素會溢了文檔，導致出現橫向滾動條，爲解決這一問題，我們可以爲其添加一個特殊的樣式-webkit-box-sizing:border-box;用來指定該盒子的大小，包括邊框的寬度。
10.如何解決Android 2.0以下平臺中圓角的問題
在對一個元素定義圓角時，爲完全兼容android 2.0以下的平臺，我們必須要按照以下技巧來定義邊框圓角：
- -webkit這個前綴必須要加上（在iOS中，你可以不加，但android中一定要加）；
- 如果對針對邊框做樣式定義，比如border:1px solid #000;那麼-webkit-border-radius這屬性必須要出現在border屬性後。
- 假如我們有這樣的視覺元素，左上角和右上角是圓角時，我們必須要先定義全局的(4個角的圓角值)-webkit-border-radius:5px;然後再依次的覆蓋左下角和右下角，-webkit-border-bottom-left-radius:0; -webkit-border-bottom-right-border:0;否則在android 2.0以下的平臺中將全部顯示直角，還有記住！-webkit這個前綴一定要加上！
還有好多事項今後有時間在添加吧