移動端BUG兼容

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

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

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

二、IOS後退無刷新

使用onpageshow主動觸發js事件實現所需的刷新
onpageshow 事件在用戶瀏覽網頁時觸發。

onpageshow 事件相似於 onload 事件，onload 事件在頁面第一次加載時觸發， onpageshow 事件在每次加載頁面時觸發，即 onload 事件在頁面從瀏覽器緩存中讀取時不觸發。

爲了查看頁面是直接從服務器上載入仍是從緩存中讀取，你可使用 PageTransitionEvent 對象的 persisted 屬性來判斷。 若是頁面從瀏覽器的緩存中讀取該屬性返回 ture，不然返回 false 。

window.onpageshow=function(ev){
    alert("頁面是否從瀏覽器緩存中加載? " + ev.persisted);
}

三、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;
}    

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

通常狀況下這不是一個問題，好比一些外賣軟件在訂單提交成功後還能夠後退到支付頁面，只是沒法再提交了。

在多頁面裏，這是一個很無奈的問題，由於瀏覽器的控件是沒法正常去操做的。

而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請求回來的，頁面的路由跳轉都在前端實現。