前端杂谈 · Web

Html5的IOS兼容處理

小编 · 7月23日 · 2020年

H5的IOS兼容處理

在將H5頁面放於IOS上會出現許多的兼容問題,這是由於ios的內核系統導致的,因此就需要專門針對ios對代碼進行一些兼容處理。

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

0 条回应

必须 注册 为本站用户, 登录 后才可以发表评论!