android button点击变色_Android与IOS的的兼容总结

前言

虽然最近没怎么开发H5端的应用,但是还是想总结下之前开发移动端遇到的一些问题,顺便加深一下自己的印象。

1.时间戳转换问题

安卓

Date.parse(new Date('xxxx-xx-xx 12:00:00'))

ios

Date.parse(new Date('xxxx/xx/xx 12:00:00'))

兼容写法

 Date.parse(newDate('xxxx/xx/xx 12:00:00')) ||Date.parse(newDate('xxxx-xx-xx 12:00:00'))

2.不会弹出键盘 必须满足下面几点

① 文本框获取焦点

② 手指触屏(网页区域,混合开发触屏app头不能让webview弹出键盘)

③ 没有延迟(不会ajax回调,不会延迟)

3.禁止ios弹出各种操作窗口

-webkit-touch-callout:none

4.禁止用户选中文字

-webkit-user-select:none

5.js动态生成的下拉菜单在安卓2.0中不起作用

删除overflow-x:hidden然后在js生成下拉菜单之后聚焦focus

6.ios中文输入法输入英文时会有小空格

用正则

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

7.touchmove事件在Android部分机型只触发了一次

在触发函数里面加上e.preventDefault(); 记得将e也传进去。

8.IOS的Safari环境

问题:在做移动端左右滑动的时候,用到了CSS3的Transition属性来进行动画变换,结果每次渲染Transition属性时,出现闪屏现象。

有以下两种解决办法,

方法一:

设置内嵌的元素在 3D 空间如何呈现:保留 3D/

-webkit-transform-style: preserve-3d;

方法二:

设置进行转换的元素的背面在面对用户时是否可见:隐藏)*

webkit-backface-visibility: hidden;

9.input框聚焦,ios出现outline或者阴影,安卓显示正常

input:focus{outline:none}input:{-webkit-appearance: none;}

10.input 的placeholder属性会使文本位置偏上

line-height: (和input框的高度一样高)---pc端解决方法line-height:normal ---移动端解决方法

11.input type=number之后,pc端出现上下箭头

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {    -webkit-appearance: none !important;    margin: 0;}

12.ios系统,会将数字当成电话号码,导致变色

13.禁止安卓识别email

14.ios手机页面里可滚动内容滚动不流畅

-webkit-overflow-scrolling : touch;

总结

如果你有遇到过其他的兼容性问题,并有解决方案,也可以私信投稿噢!

往期精彩文章

深入了解 JavaScript 闭包

如何在不同项目中共用前端资源,从此不加班

一个比较全面的基于axios的封装

查阅更多精彩文章,关注“悲伤日记”

android button点击变色_Android与IOS的的兼容总结_第1张图片

你可能感兴趣的:(android,button点击变色,android,上下滚动文字,android,触发输入法键值,android弹出窗口,input,capture兼容写法)