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過後才會認定用戶是在執行點擊。
必须 注册 为本站用户, 登录 后才可以发表评论!