當在安卓低版本呈現的界面（H5）出現問題的時候，我們怎么解決？

昨天，在醫院現場的客服人員，向我們反饋一個問題：說一位用戶用他的安卓手機打開我們的app之后，界面是亂掉的；如下圖：

 

 

 

向客服詢問了具體的設備信息：安卓系統版本號是4.2

下意識覺得是因為css的兼容問題，因為之前遇到過太多類似問題了。

因為現在css3大行其道，像 flex,transform，transition，animation等屬性都有廣泛的應用，當然這些css3也支持當下的主流設備及系統。

但是因為我們的app目標用戶比較廣泛，很多用戶是老年用戶，使用比較低版本的系統，這些屬性就可能在兼容問題。

 

我看了一下這個頁面的css源碼，發現彈框的樣式如下：

.modal {
    display: none;
    max-height: 80%;
    overflow: hidden;
    position: fixed;
    width: 86%;
    top: 50%;
    left: 7%;
    background-color: #fff;
    padding: 0;
    z-index: 12;
    zoom: 1;
    overflow: hidden;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-transform: translate3d(0, -52%, 0);
    transform: translate3d(0, -52%, 0);
}

 

在 http://caniuse.com/ 查了一下transform的兼容性:

 

結果如下：http://caniuse.com/#search=transform

 

 

根據查詢結果，我們發現：transform不兼容安卓4.3以下版本

所以，上述BUG產生的原因很可能是因為用了：transform: translate3d(0, -52%, 0) 來實現上下居中導致的。

 

解決：

優雅降級：在不影響當前代碼功能的前提下，用js判定安卓4.3以下版本的運行環境，因為彈框高度不固定，動態獲取彈框高度，重置transform屬性值，然后利用margin負值居中。

    var userAgent = navigator.userAgent;
    var index = userAgent.indexOf("Android")
    if (index >= 0) {
        var androidVersion = parseFloat(userAgent.slice(index + 8));
        if (androidVersion < 4.3) {
            var androidH = $('.modal').height();
            $('.modal').css({ 'height': androidH, '-webkit-transform': 'translate3d(0,0,0)', 'transform': 'translate3d(0,0,0)', 'top': '50%', 'margin-top': -androidH / 2 });
        }
    }

　　

解決效果：

 

 

總結思路：

當我們遇到低版本安卓上界面出現問題，主流設備和系統都正常時，我們可以這樣解決：

1> 查看問題出css源碼，重點查看css3的一些新屬性；

2> 去 http://caniuse.com/ 查看這些新屬性的兼容性；

3> 如果bug影響范圍較小，可以使用優雅降級，對bug進行特殊處理；但是如果bug原因影響范圍較大，建議使用兼容性較好的代碼重構原來的代碼。