Html5的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過後才會認定用戶是在執行點擊。