移動端兼容性問題盤點,IOS與Android

一、new Date

參考地址:https://www.cnblogs.com/zjjDaily/p/8963327.html
1)ios中new Date(‘2019-08-08 11:11’);這種時間格式會報錯。ios中需使用2019/08/08 11:11 這種時間格式。

二、軟鍵盤和輸入框

1)ios12+機型,軟鍵盤彈出後,屏幕中可視區變小,軟鍵盤收起後,頁面出現無法下滑的情況。
解決方法
js控制滾動條的滑動,觸使頁面下滑。

2)ios上鍵盤的輸入會立即被表現在輸入框中,併成爲輸入框中的值(特別是中文輸入法),Android則不會出現這種情況。對計算輸入長度造成困擾。
解決方法
如果沒有經過特殊處理中英文都按一個字符計算。

		var sw = false;

		// 解決ios輸入中文(長文本輸入)時,字數計算錯誤
		$(obj).on("compositionstart", function() {
			sw = true;
		});
		$(obj).on("compositionend", function() {
			sw = false;
			// 中文輸入控制
			showTextLength();
		});
		// 計算字數(非中文輸入)
		$(obj).on('input', function(e) {
			if(sw == false) {
				showTextLength();
			}
		});

		function showTextLength() {
			...
		}

3)在移動端如果要對輸入使用keyup事件時,請使用input事件代替。另外,change事件是在輸入框失去焦點時觸發的;input是在輸入框內容改變時就觸發的。

4)ios當軟鍵盤收起時,輸入框就失去焦點了,但是Android仍是處於聚焦的狀態,如果使用focus進行判斷達不到效果。

5)οncοntextmenu=“return false;” οnpaste="return false;"前者可以禁用Android和微信模擬器長按後者右鍵複製粘貼(不包括ctrl+c和ctrl+v),但是IOS不行。後者用於讓IOS機無法長按粘貼,並且禁用ctrl+v。

6)軟鍵盤彈出後,ios的頁面高度不會縮小,Android的頁面高度會變小。

7)對於底部彈出的輸入框,在軟鍵盤彈出後,IOS因爲頁面高度不變,無法吸附在軟鍵盤上,仍是吸附在頁面底部,可以把滾動條滾動到最底部,保證彈出的輸入框一直可見。Android無此問題。

三、滾動

1)-webkit-overflow-scrolling: touch;可以解決IOS滑動卡頓的問題,Android上如果滑動的距離不夠長也有卡頓的感覺,長的話效果較好。

四、positon:fixed;

不論在IOS還是Android中,都是生效的,但如果放在iframe中,IOS會出現抖動的狀況。
解決方法:
A、將fixed元素,放在滾動區外面。
B、可以通過calc計算滾動區的高度,將滾動區和fixed元素進行分離。

五、息屏狀態下的js運行情況

1)IOS:
鎖屏:
js會再執行三秒後再被掛起。
後臺模式:
js會立即被掛起,但是再次進入的時候,執行的速度加快了,直到3秒。
2)Android:
鎖屏:
js會繼續執行,但時間不太匹配
後臺模式:
js會繼續執行

解決方法
使用jquery-timer可以在息屏時,繼續執行js倒計時,但其他方法也是需要在亮屏後才執行。需要改寫源碼,增加每秒回調的方法。

六、選擇多圖 <input multiple/ >

安卓微信瀏覽器不支持一次選擇多張圖片,ios可以。目前原生寫法暫未找到解決方法。聽說微信jssdk可以解決(未嘗試)。

七、background-image

$obj.css(‘background-image’)獲取url地址,在IOS中是不帶雙引號的,在Android和PC中是帶雙引號。

八、自動獲取焦點

1)安卓可以使用focus()自動獲取輸入框的焦點。但是ios無法直接使用focus()自動獲取輸入框的焦點,需要藉助其他的事件,觸發輸入框自動獲取焦點,如將自動獲取焦點綁定在其他元素的點擊事件上。

2)如果將手動觸發的聚焦事件再用setTimeout包裹的話,也是不能自動聚焦的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章