手機網頁select控制項的實現.

唉...該死的Firefox瀏覽器.當我部落格寫到一半的時候掛掉了.還得重寫.壓抑......

額

做手機版網址導航有一段時間了.中途製作的時候遇到了很多離奇的問題.其中最讓我頭疼的就是頭部search的實現了.

目標如下:

當我看到這個頁面的第一眼的時候.

我就想到了用一個隱藏的UL在"Google"下面,用JS去控制列表模仿select控制項.

如:

這不就是我朝思暮想的結果嗎.

結果測試的時候杯具了.

問題:在手機上當我用我的手指頭點"百度"或"易查"的時候.被下拉式功能表蓋住一半的百度貓爪表徵圖總是也跟著被點擊了.導致頁面跳轉

原因:當我的小指肚觸碰易查和貓爪中間的那根線的時候.你覺得瀏覽器會判定易查和貓爪哪個被點擊呢?

 

大家可能會問,誰去點那根線做什麼.大家都是衝著"易查"那兩個字去的.

但是...因為手機上的字和表徵圖是沒有電腦上的顯示的那麼大的.320解析度的手機上的百度貓爪表徵圖,顯示的只有的四分之一大小

我們的手指肚卻不像電腦上的滑鼠.那麼精確.我們的手指肚是非常大的.我的芊芊手指輕輕一點.比上面的百度貓爪表徵圖還大.

幾乎每次都是一半點鐘在字上,一半點鐘在貓爪表徵圖上.

我非常小心的觸碰.誤操作率達到了70%以上.

於是我帶著疑惑想看看其他網站諸如hao123之類是怎麼做的.

發現...hao123也同樣是為了樣式之美.放棄了原生的select.使用隱藏的列表用js類比這種方式...誤操作的幾率.同樣也非常的高.

 

後經過考慮.決定用原生的select.因為這樣.才可以保證在每款手機上相容.而且方便點擊.

我的實現步驟:

外層一個固定寬的框截斷.內層一個無背景無邊框的select,並列一個自製下三角壓住select的按鈕.如:

 
 

 

在手機上的效果如:

 

 

木有了.