網站移動版本開發踩坑實錄三

網站移動版本開發踩坑實錄三

---

鑑於本人在移動wap上的開發經驗少，遇到的問題確實很多，不少問題都是爲了項目緊急上線而不得已的寫臨時性的fixed的方案，因此解決方法也存在缺陷，此次記錄的雖然沒有什麼高大上的東西，把幾個明顯的問題和解決過程記錄下來。

一、ios系統瀏覽器事件會觸發兩次

問題發現於ipad、iphone上，起初遇到這個問題本覺得本身在綁定了兩次事件(touchstart click),可是因爲最新的ipad對click事件不支持以及爲了防止重複綁定事件，所以我特地處理了關於touchstart和click作了一個統一的處理，看過事件綁定之後我就想着是否是我觸發了兩次呢，而後我跟蹤代碼發現確實觸發了兩次，google一下：click event call twice in ipad 發現還真有相似的狀況，http://stackoverflow.com/questions/4569869/jquery-click-event-is-called-twice-on-ipad ； 無奈啊。看着處理方式是unbind而後在bind這樣每次都要將點擊相關的事件作這種處理，先無論效率如何，單純的反覆綁定就不是很習慣。而後我繼而找了fastclick 的插件，大概看了一下源代碼，經過touch.identifier === this.lastTouchIdentifier 最後一次touch標識判斷是不是重複調用（我沒有那麼高深，之前沒注意過）.起初我想靠這種方式解決咱們的問題，以前也說過咱們wap上用的是zepto，而若是引入fastclick意味着點擊相關的事件綁定要移到fastclick相關，而dom選擇和操做都要zepto須要兩套，所以我決定放棄。被逼無奈我想到了一種方式就是dom鎖，即dom點擊觸發之後鎖定dom，讓dom 1s 以內不反覆調用，從而第二次touchend就不會觸發業務代碼。

二、android平臺遮罩層下的input、select、a等元素能夠被點擊和focus

問題發現於三星手機，這個在特定需求下才會有，所以若是沒有相似問題的能夠不看。首先需求是浮層操做，在三星上被遮罩的元素依然能夠獲取focus、click、change.這個問題着實棘手啊，記不得怎麼查的了，最後找到https://code.google.com/p/android/issues/detail?id=6721 ，據瞭解3.0如下都會受到影響，在我測試的小米手機上怎麼也不會出現這個問題。在查看bug報告list之後，找到了兩種解決方案，第一是經過層顯示之後加入對應的class名控制，第二是經過將可獲取焦點元素加入的disabled屬性，因而我採用了第二種方案，就由於我更喜歡js控制他們，固然因爲浮沉下不只用可獲取焦點的元素還有a這類的連接和用a模擬的button，全部在不可用disabled控制的元素一概加入永久鎖定，而後浮層隱藏或關閉後取消鎖定（其實只有我管這種經過data屬性肯定是否觸發dom業務的代碼加鎖而已），而後幸運的測試經過了。

三、android平臺下獲取光標的input在上下滾動的時候位於在fixed元素上

問題依舊發如今三星自帶瀏覽器上，獲取焦點的input經過在上下滾動的時候input focus 呈如今fixed的層上，這個確實很讓我鬱悶， 三星不但在橫屏調起時我各類苦惱，還出現不少噁心的事情，在網上找一種解決方案就是input獲取焦點之後去掉fixed，所以在尚未事件代碼以前我yy了一下,當頁面input獲取焦點之後將fixed的層變爲static，而後頁面滾動的時候判斷docuemnt.activeelement 是不是input或是select等可輸入和選擇的元素，若是時繼續去掉fixed，不是則還原fixed。而後在這些元素blur之後還原fixed（貌似scroll看起來沒意義啊）

四、ipad上從一個輸入框獲取焦點的狀態切換到另外一個遮罩層的input框時，高度計算有問題

只發如今ipad上，iphone上沒有，這個我只看到效果，尚未對應測試具體代碼

五、微信自帶瀏覽器獲取視窗高度和可操做高度不一致的問題

需求是彈出搜索層時計算視窗高度動態控制可顯示區域和滑動處理，問題源自於站點嵌入到微信之後，經過自帶瀏覽器打開網站，$(window).height()獲取的高度比實際可操做高度大（懷疑是微信上有個殼，殼上有一個可操做菜單），雖然沒有把測試代碼部署實際測試一下，緊迫的項目進度催促下，只能經過agent判斷是來自於微信，將實際獲取高度減去100

六、select-option的展示行爲

若是讓你隱藏一個元素，直觀的第一想法必定是element{dislay:none};嗯，那麼在select的option上display貌似就不那麼奏效了，考慮到在wap上根據特定條件展示下拉框中的內容，我很天然的應用了display，在模擬器裏測試沒有問題，而後我就特別放心的放到測試版本里面。手機上看了一眼，我擦居然沒有隱藏。看到這裏有解決辦法： http://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css 。雖然我沒有親測，可是在chrome下option display:none 沒有問題。

七、ios平臺轉屏頁面紊亂問題

問題發現於ipad上，當頁面反覆旋轉的時候自適應的頁面出現紊亂，以下圖

很蹊蹺就是當沒有調起鍵盤的時候頁面旋轉正常，只有調起鍵盤再旋轉的時候就亂了， 先不論是否調起鍵盤，據我分析必定是旋轉之後重繪那裏出了問題了，所以找了一下對應的解決方案， http://stackoverflow.com/questions/8840580/force-dom-redraw-refresh-on-chrome-mac 基本上就是旋轉觸發的時候重繪一下，而後經過hide.show去達到頁面區域重繪（不過設置爲0貌似沒有經過）。

八、ipad上safari歷史記錄後退頁面佈局混亂

這個問題出現於safari上（ios平臺會出現），數據提交html更改了或是頁面產生動畫這類的行爲，至於其餘瀏覽器我沒測試過，問題歸結於回退到上一步的時候使用的html cache，記錄了跳轉到下一個頁面的html，因此回退回來之後頁面出現頁面絮亂（忘記截圖了），所以這樣子只能出大招了，若是判斷頁面是經過回退過來的就強制刷新頁面，如何處理在這裏http://stackoverflow.com/questions/8788802/prevent-safari-loading-from-cache-when-back-button-is-clicked ，補上一篇ff的文檔https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching

 

九、chrome 地址欄自動隱藏交互行爲對於fixed 頂部的元素遮擋

系統：ios8.1
瀏覽器：chrome 26.0.1410.53

描述信息：頁面包含fixed頂部的tip element，當頁面向下滑動的時候chrome地址欄自動隱藏，當向上滑動的時候地址欄自動出現。這種交互行爲自己的好處會增大用戶可視、交互區域。可是在chrome 26這個版本貌似這個瀏覽器UI佈局使用adjustPan的方式，以致於向上滑動之後fixed的元素沒有被自動向下移動（沒有重繪）。

bug fixed 解決辦法在這裏