移动端的一些兼容性问题

前言

在做移动端页面时,常常会有一些兼容性问题，这里是碰到的2个IOS的兼容性问题

1、IOS11表单输入光标错位

image.png

这个问题产生的原因有2个，一个是设计的时候将表单设计在弹框里面，第二个则是客户的手机版本是IOS11。
解决方案，加上如下代码：

function relsoveForm(them){      //them为触发弹出表单的元素，可以以它为对应，将样式设置为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;/*点击按钮距离屏幕顶部的相对，相对多少数字可以自己输入调整*/
            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元素，有时会发现在IOS的环境下居然点击没有效果，用其它元素有时更不好，最暴力的解决办法就是加句css：cursor:pointer，加一个手形状。这样点击就能监测到了。

3、手机JQ、Zepto的click事件比tap事件会有300ms延迟

解决办法，引入fastclick.js这个插件

4、IOS系统new Date不兼容

做倒计时的时候从后台获取当前时间，在前端使用new Date在IOS系统中出不来，排查后发现IOS中，new Date不兼容，返回invalid Date

image.png

这个在IOS中会出错，解决方法为：

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