前言

在做移動端頁面時,常常會有一些兼容性問題，這里是碰到的2個IOS的兼容性問題

1、IOS11表單輸入光標錯位

image.png

這個問題產(chǎn)生的原因有2個，一個是設計的時候?qū)⒈韱卧O計在彈框里面，第二個則是客戶的手機版本是IOS11。
解決方案，加上如下代碼：

function relsoveForm(them){      //them為觸發(fā)彈出表單的元素，可以以它為對應，將樣式設置為position:relative
        var ver = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
        if(Array.isArray(ver)){
             ver = parseInt(ver[1], 10);
        } 
        $("#inputDialog").css("position","absolute");
        if(ver && ver==11){    //IOS11時進行操作，其他不變
            var top = them.position().top-660;/*點擊按鈕距離屏幕頂部的相對，相對多少數(shù)字可以自己輸入調(diào)整*/
            var scrollTop = $(document).scrollTop();/*滾動條的位置*/
            var window_height = $(window).height();/*屏幕的可視高度*/
            var box_height = $("#inputDialog").height();/*彈框的高度*/
            
            top1 = top - scrollTop;
            window_height = window_height/2;
        
            if(top1<window_height){
                if(top1<box_height/2){
                    var top2 =top+100+box_height/2
                }else{
                    var top2 = window_height+(top+100)/2+box_height/2
                }
                $("#inputDialog").css("top", top2);
            }else{
                if(window_height-top1<box_height/2){
                    var top2 = top-100-box_height/2
                }else{
                    var top2 = (top+100)/2+box_height/2
                }
                $("#inputDialog").css("top", top2);    //$("#inputDialog")為彈框容器
            }
        }
    }

2、IOS上按鈕失效

使用button元素，有時會發(fā)現(xiàn)在IOS的環(huán)境下居然點擊沒有效果，用其它元素有時更不好，最暴力的解決辦法就是加句css：cursor:pointer，加一個手形狀。這樣點擊就能監(jiān)測到了。

3、手機JQ、Zepto的click事件比tap事件會有300ms延遲

解決辦法，引入fastclick.js這個插件

4、IOS系統(tǒng)new Date不兼容

做倒計時的時候從后臺獲取當前時間，在前端使用new Date在IOS系統(tǒng)中出不來，排查后發(fā)現(xiàn)IOS中，new Date不兼容，返回invalid Date

image.png

這個在IOS中會出錯，解決方法為：

var now = new Date(data.CurrentTime.replace(/-/g, "/"));