移動端BUG相容

標籤：pst   text   後端   word   fun   隱藏   移動端開發   服務   function   

總結一下目前的移動端開發遇到的問題。

1、IOS與安卓input預設樣式去除。移動端總有一個預設的圓角或別的。

input[type=button],input[type=text],input[type=password]{    -webkit-appearance:none;    outline:none;    border-radius:none;        }

2、IOS後退無重新整理

使用onpageshow主動觸發js事件實現所需的重新整理onpageshow 事件在使用者瀏覽網頁時觸發。onpageshow 事件類別似於 onload 事件，onload 事件在頁面第一次載入時觸發， onpageshow 事件在每次載入頁面時觸發，即 onload 事件在頁面從瀏覽器緩衝中讀取時不觸發。為了查看頁面是直接從伺服器上傳入還是從緩衝中讀取，你可以使用 PageTransitionEvent 對象的 persisted 屬性來判斷。 如果頁面從瀏覽器的緩衝中讀取該屬性返回 ture，否則返回 false 。window.onpageshow=function(ev){    alert("頁面是否從瀏覽器緩衝中載入? " + ev.persisted);}

3、IOS-input輸入框隱藏後游標還會出現閃動。

比如需要做一個opacity為0的input輸入框，然後觸發輸入框的值改變去變化某一些的值效果，如六個格子如密碼輸入框之類的，但在IOS裡是無法隱藏掉游標的。但可以使用label觸發input實現,而input定位消失在介面上。<label><input type="text"></label>input{    position:absolute;    left: -99999px;    top:0;    width: 1px;    height: 1px;}    

4、瀏覽器後退前進問題。

一般情況下這不是一個問題，比如一些外賣軟體在訂單提交成功後還可以後退到支付頁面，只是無法再提交了。

在多頁面裡，這是一個很無奈的問題，因為瀏覽器的控制項是無法正常去操作的。

而history提供了向曆史管理推送曆史或替換曆史的方法。

pushState、replaceState

這些方法在重新整理情況下是無法觸發popstate的監聽的。

所以推送hash值是比較好的，因為在無重新整理的情況可以觸發監聽。

而pushState推送與replaceState替換是不會觸發重新整理的當前頁的，只有前進後退到這個曆史管理是才會更新當前頁。

所以有時會發現IOS的replaceState可以觸發popstate，而安卓不會，因為IOS緩衝最佳化原因，不會重新整理前進後退的記錄，

而安卓就會。

但現在一些瀏覽器也開始實現無重新整理前進後退。

所以瀏覽器的控制前進後退操作實現起來很醜陋。

而現在單頁面就比較好，因為都是以某些無重新整理的方式推入曆史管理而實現更加優雅的效能最佳化，比如hash值變化知道展示什麼頁面，

這樣就可以在前端實現曆史管理可控性，這樣就可以自己有更多許可權實現所需，而且效能更好。

function hash(){            var hash = window.location.hash.substr(1);            window.addEventListener("popstate", function () {                   console.log(history.state);            })            if(hash){                history.back();            }        }

總結一句，瀏覽器的前進後退問題是很不好解決的問題。

如果有條件，最好使用現流行單頁面應用開發方式，這樣可控性更多且前後端分離，而且優秀MVVM架構有很多，傳統MVC開發前端後台一人搞實現太麻煩了，規範也很亂。

如SpringMVC，使用.do方法實現跳轉頁面，但這裡有一個問題就是前進後退跳轉頁面.do方法會在曆史管理記錄裡所以會在緩衝裡取出，那麼就會再一次請求這個.do而頁面

ajax的方法再沒有表明緩衝取的情況是直接重新請求的，那麼就出現問題了，比如想實現一個後退重新整理頁面的方式，只能使用reload等方式，那麼頁面會閃動一下，因為返回時

快取頁面面會直接出現，而重新頁面需要時間請求載入，這樣就是一個頁面效能問題的，而單頁面就不會，因為所有資料都ajax請求回來的，頁面的路由跳轉都在前端實現。

 

移動端BUG相容