移动端开发兼容问题

232 阅读1分钟

ios下input为type=button属性disabled设置true,会出现样式文字和背景异常问题。

使用opacity=1来解决

对非可点击元素如(label,span)监听click事件,部分ios版本下不会触发。

css增加cursor:pointer

input为fixed定位,在ios下input固定定位在顶部或者底部,在页面滚动一些距离后,点击input(弹出键盘),input位置会出现在中间位置。

内容列表框也是fixed定位,这样不会出现fixed错位的问题

移动端字体小于12px使用四周边框或者背景色块,部分安卓文字偏上bug问题。

可以使用整体放大1倍(width、height、font-size等等)再使用transform缩放,使用canvas在移动端会模糊也需要这样的解决方案

在移动端图片上传图片兼容低端机的问题。

input 加入属性 accept="image/*" multiple

在安卓机上placeholder文字设置行高会偏上

input有placeholder情况下不要设置行高

overflow:scroll,或者auto在iOS上滑动卡顿的问题

加入-webkit-overflow-scrolling:touch

H5底部输入框被键盘遮挡问题

让dom元素出现在可见视图的顶部或底部,只要在input的点击事件,或者获取焦点的事件中,加入这个api就好了

iOS 系统中文输入法输入英文时,字母之间可能会出现一个六分之一空格

可以通过正则去掉

this.value = this.value.replace(/\u2006/g, '');

ios下取消input在输入的时候英文首字母的默认大写

< input autocapitalize="off" autocorrect="off" />