移动端兼容性问题盘点,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包裹的话,也是不能自动聚焦的。

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