1. 如何選擇觸摸手勢？
不要用滑動手勢表示選擇。因為在原生應用程式中這表示刪除
不要更改作業系統預設手勢。比如長按表示呼出內容選單，雙指捏緊為縮小，雙擊為放大。。除非你能重新實現相同的基本功能
2. 怎樣讓介面「看起來」更快？
及時向用戶回饋。比如進度條，過渡動畫等等，此外圖片淡入效果也能讓人感覺變快（雖然實際上是變慢了）
3. 媒體查詢（media query）
IE8- 不支援媒體查詢。在移動端這並不影響什麼，因為移動端至少是 IE10
一般分界值：480px 以下 ~ 手機瀏覽器；800px 以上 ~ 桌面瀏覽器；480px 到 800px ~ 平板上的瀏覽器
4. 使用合適的選擇器（selector）
避免使用後代選擇器。可以用 class 代替，因為瀏覽器解析 CSS 選擇器是從右向左的，後代選擇器存在很大的開銷
5. 用 em 還是 px？
都可以。em 流行過一段時間（2005 年左右），因為當時瀏覽器有了改變字體大小的功能，用 em 做單位可以適應字體變化，後來 IE7 預設縮放方式變成了縮放頁面上的所有元素，em 就被遺忘了，現在 px 仍然是最簡單粗暴的單位。而使用 em 還是 px，都可以，或者說都不算太糟。
6. viewport 有什麼用？
viewport 是用來限定視窗（視窗）大小的。所謂視窗就是瀏覽器給頁面提供的容器（除去標題列，工具列，分頁列，狀態列等等），viewport 有以下屬性被廣泛支援：
- width
- 設置 viewport 的寬度，預設值為 980，允許的取值範圍是 200-10000
- height
- 設置 viewport 的高度，預設值是透過寬度和設備寬高比計算出來的，允許的取值範圍是 223-10000
- initial-scale
- 設置 viewport 的初始比例，預設值是透過計算使得整個頁面在可見區域內，範圍由 minimum-scale 和 maximum-scale 屬性決定
- maximum-scale
- 設置 viewport 的最大比例，預設值是 5.0，允許的取值範圍是 0-10.0
- user-scaleable（*注意後一個單字的寫法*）
- 決定用戶是否可以縮放視圖，還可以防止文本開始輸入時的滾動
可以像這樣使用 viewport 屬性：
<meta name="viewport" content="width=device-width">
自動適應設備寬度，在百分比佈局時比較常用，比如頂部 header 需要 100% 寬度
7. 為什麼頁面載入緩慢？
-
HTTP 連接數過多（或者是大 cookie）
-
總的位元組數太大
-
等待時的渲染阻塞（外部 CSS 檔案以及載入過程執行的 js 腳本）
-
延遲（3G 網路大約有 500ms 延遲）
-
快取能力差
8. 為什麼感覺動畫特別卡？
儘量避免使用 setTimeout 動畫。應該用 transition 來代替，因為 CSS 動畫是在另一個執行緒中執行的（非 js 執行緒）
9. 為什麼 fixed 佈局無法正常工作？
移動端的 fixed 佈局必須添上 viewport 元資訊 width=device-width 和 user-scaleable=no，例如：
<head>
<meta name="viewport" content="width=device-width, user-scaleable=no"
</head>
防止用戶縮放頁面，影響頁面佈局
10. 有哪些頁面性能檢測工具？
- YSlow，Yahoo! 的小工具，能夠給頁面評分，給各項指標評級並給出優化建議
- PageSpeed，除了上面的功能外，還支援移動優化
上面提到的兩個工具都有 FF 和 Chrome 外掛程式
參考資料
- 《Building Touch Interfaces with HTML5》（《HTML5 觸摸介面設計與開發》）
暫無評論，快來發表你的看法吧