常用的移動前端webapp互動細節

##select的表現方式

###pc端

select控制項在傳統pc桌面已經存在多年，由於在ie6等低版本瀏覽器容易造成層級錯亂，一直被一些ui框架所拋棄，而用div層去模擬。

![傳統的select控制項](

###移動裝置

而在移動裝置上,select 控制項的表現方式不太一樣，如下圖，分別是uc瀏覽器，小公尺的系統瀏覽器，及海豚瀏覽器的表現方式

可以看出，為適應移動裝置小螢幕的特徵，很多瀏覽器都對此進行優化改造。

###原理與思考

此現象的根本原因，是html只有文件標準，所以各個軟體（瀏覽器）的實現有其具體表現。的確，要進行web標準的互動，只能制定文件層面的標準。但也帶來外觀不統

一、控制項表現、操作體驗不統一的問題。像uc就要在選擇之後進行二次確定，小公尺和海豚都不需要；小公尺的定位在底部，其他的都是居中表現的。

##單行資料內容過長的表現方式

###pc端

![pc端的列表展現](

或者可以利用**滑鼠提示**來展現可能會超出範圍的文字

###移動裝置

而在移動裝置上，上述方案並不可行，但是我們可以用另外的表現方式：`swipe`。如[示範頁面](所示

###原理與思考

原理是非常簡單的，在乙個寬100px，overflow非hidden的容器裡面放進200px的內容，容器會產生滾動條。然後結合觸控裝置的特點：滾動條並不佔位置，並且是按住內容滾動的。這種表現方式就變得非常適應。

###元件化的swipejs

上面講到的表現非常原始，對於大批量應用，我們一般參考現成元件[swipe.js](利用它去處理（可能在一些ui框架已經整合了此表現方式）。基本原理還是利用滾動條，然後再加入了transform等新css3特徵使之有一定的動畫效果並且接近原生的表現。

##按鈕的大小與間隔

###pc端

在滑鼠指標控制的pc端，各功能按鈕可以非常小，並且可以放得非常緊湊，例如經典的window視窗右上角-□×三個按鈕（最小化最大化關閉），置於右上角是非常方便的，並且一般人也不容易按錯。

###移動裝置

而在移動裝置上，由於觸控螢幕和人手指的特點，按鈕應該要做得大而有一定間距，如圖，我們按鈕的圖示可能如紅框所示，但是按鈕的功能有效區域應該是整個黑框。

![移動裝置的按鈕](

##最後的話

然後是自己的一些博文計畫，列出來，讓自己經常記得要整理~

---狀態機

---fiddler應用（反向**）

---angular的filter

---打包發布工具ant,grunt（工程化）