H5的IOS兼容处理

H5的IOS兼容处理

在将H5页面放于IOS上会出现许多的兼容问题，这是由于ios的内核系统导致的，因此就需要专门针对ios对代码进行一些兼容处理。

时间的转换

ios获取到的时间格式与Android的时间是不一样的，用正常的获取方式进行处理会出现处理错误的情况，这个就需要对格式进行处理。

//正常的时间获取
aDate = sDate1.split("-"); 
oDate1 = new Date(aDate[1] + "-" + aDate[2] + "-" + aDate[0]);

//ios获取时间
aDate = sDate1.split("-"); 
oDate1 = new Date((aDate[1] + "-" + aDate[2] + "-" + aDate[0]).replace(new RegExp(/-/gm) ,"/"));

点击事件的处理

对于H5的点击事件需要绝对避免使用click进行处理而是采用tap进行代替，这二个事件的区别在Android上体现并不是很明显，但是在ios上能感觉click有明显的300ms的延迟。如果发现点击事件存在延迟可以查看一下代码写的是不是click事件，将click与tap进行代替就可以了。
除了普通元素的click延迟，ios的输入框弹出输入法都存在有延迟并且还会存在点击穿透的现象，为了快速的解决这个问题可以引入一个插件 —— fastclick.js

//引入fastclick.js后加入以下代码
$(function() {
	FastClick.attach(document.body);
});

//原生实现
if ('addEventListener' in document) {
	document.addEventListener('DOMContentLoaded', function() {
		FastClick.attach(document.body);
	}, false);
}

引入 fastclick.js 确实可以解决ios的点击延迟的问题，但是引入后又引发了另一个问题，input输入框在点击一次后就无法再次点击输入，输入框无法获取焦点。要解决这个问题还需要在fastclick.js中加入以下代码。

FastClick.prototype.focus = function(targetElement) {  
	var length;
	if (deviceIsIOS&& targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {    
		length = targetElement.value.length; 
		targetElement.focus();
		targetElement.setSelectionRange(length, length);  
	} else {   
		targetElement.focus();
	}
};

加入这些代码后，在iOS的系统上点击事件基本就没有延迟了。
而这300ms的延迟的原因就是iOS系统早期的设定问题，因为iOS工程师弄了个双击缩放的功能，而这个功能就是在用户点击网页后在300ms内判断用户有没有双击，300ms过后才会认定用户是在执行点击。