#常用的移動前端webapp交互細節 ##select的表現方式 ###PC端 select控件在傳統PC桌面已經存在多年，由於在IE6等低版本瀏覽器容易造成層級錯亂，一直被一些UI框架所拋棄，而用div層去模擬。  ###移動設備 而在移動設備上,select 控件的表現方式不太一樣，如下圖，分別是UC瀏覽器，小米的系統瀏覽器，及海豚瀏覽器的表現方式
可以看出，為適應移動設備小屏幕的特征，很多瀏覽器都對此進行優化改造。 ###原理與思考 此現象的根本原因，是html只有文檔標准，所以各個軟件（瀏覽器）的實現有其具體表現。的確，要進行web標准的交互，只能制定文檔層面的標准。但也帶來外觀不統一、控件表現、操作體驗不統一的問題。像UC就要在選擇之后進行二次確定，小米和海豚都不需要；小米的定位在底部，其他的都是居中表現的。 ##單行數據內容過長的表現方式 ###PC端 在新聞列表、文章標題列表的頁面，很容易出現標題比內容長的情況，在PC端的一般表現方式是**類似excel表格的列寬調整機制**，如圖（鼠標在上面拖動可以調整列寬）：  http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem= 或者可以利用**鼠標提示**來展現可能會超出范圍的文字 ###移動設備 而在移動設備上，上述方案並不可行，但是我們可以用另外的表現方式：`swipe`。如[示范頁面](http://gh.p2227.com/m/swipe)所示 ###原理與思考 原理是非常簡單的，在一個寬100px，overflow非hidden的容器里面放進200px的內容，容器會產生滾動條。然后結合觸摸設備的特點：滾動條並不占位置，並且是按住內容滾動的。這種表現方式就變得非常適應。 ###組件化的swipejs 上面講到的表現非常原始，對於大批量應用，我們一般參考現成組件[swipe.js](http://swipejs.com/)，利用它去處理（可能在一些UI框架已經集成了此表現方式）。基本原理還是利用滾動條，然后再加入了transform等新css3特征使之有一定的動畫效果並且接近原生的表現。 ##按鈕的大小與間隔 ###PC端 在鼠標指針控制的PC端，各功能按鈕可以非常小，並且可以放得非常緊湊，例如經典的window窗口右上角-□×三個按鈕（最小化最大化關閉），置於右上角是非常方便的，並且一般人也不容易按錯。 ###移動設備 而在移動設備上，由於觸摸屏和人手指的特點，按鈕應該要做得大而有一定間距，如圖，我們按鈕的圖標可能如紅框所示，但是按鈕的功能有效區域應該是整個黑框。  ##最后的話 最后，自己評價一下吧，我覺得本文還是非常直觀的感覺與積累，並沒有進行太深入的分析與原理探索，主要還是想拋磚引玉，想跟大家一起討論一些用戶體驗的東西。 然后是自己的一些博文計划，列出來，讓自己經常記得要整理~ ---狀態機 ---fiddler應用（反向代理） ---angular的filter ---打包發布工具ant,grunt（工程化）