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(/\u2006/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系统，会将数字当成电话号码，导致变色

<meta name="format-detection" content="telephone=no"> 
<meta http-equiv="x-rim-auto-match" content="none">

13.禁止安卓识别email

<meta content="email=no" name="format-detection" />

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

-webkit-overflow-scrolling : touch;

总结

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

往期精彩文章

深入了解 JavaScript 闭包

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

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

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

喜欢点个在看吧！↓↓↓