前言
虽然最近没怎么开发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的封装
查阅更多精彩文章，关注“悲伤日记”
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。