作者: xteamer成员: shuaiyin
【摘要】今天给大家分享一下自己在实际开发中，所遇到的移动端IOS和android兼容性问题。其实本人在最初开发的时候，很容易忽略的就是IOS的问题，例如：时间格式的显示问题。相信很多初级开发者都会有这样的经历，在IOS手机上，会看到显示NaN的页面。这就是IOS不兼容时间格式问题所导致的。实际开发过程中还有很多的兼容性问题，会一一列举出来。以后有新的关于兼容问题会持续更新。
一.日期的兼容性
1.安卓和ios转换时间戳的形式
关于时间的转换，在安卓系统和ios系统是存在兼容性的，也就是说，在安卓手机可以正常显示的时间，在ios系统上面就会出现NaN。
在安卓系统下，我们可以直接转换：
Date.parse(new Date('2018-03-30 12:00:00'))
但是在ios系统下，
Date.parse(new Date('2018-03-30 12:00:00'))
是无法转换成功的，就会出现NaN这样的兼容性问题。
那么解决方案就需要将时间转换成如下的格式，ios系统才可以成功转换，Date.parse(new Date('2018/03/30 12:00:00'))。
如何转换成这种的时间格式：方案如下：
//将xxxx-xx-xx的时间格式，转换为 xxxx/xx/xx的格式 var date = '2018-07-25 19:25'; date = date. ;
封装成函数就是：
function formatTimeStamp (time) { return Date.parse(new Date('2018/03/30 12:00:00')) || Date.parse(new Date('2018-03-30 12:00:00')) }
二.input输入框聚焦
input输入框在聚焦的时候，ios有时候会出现outline或者阴影，安卓则是显示正常的。那么解决方案：
input:focus{outline:none} input:{-webkit-appearance: none;}
三.ios系统会将数字当成电话号码，导致变色
解决方法：
<meta name="format-detection" content="telephone=no"> <meta http-equiv="x-rim-auto-match" content="none">
对于我们的系统框架来说，已经解决这样一个问题。
四.input输入框的placeholder
input输入框的placeholder，也就是输入框的提示性文字。会出现不在输入框的中间位置，导致位置偏上。
那么移动端的解决方案就是：
line-height：normal ---移动端解决方法。
五.input输入框type类型为number的时候
type类型为number也就是说，输入框输入的是数字，但是会出现上下的箭头。可以将箭头给隐藏掉。
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; }
六.安卓手机可以点击图片
部分的安卓手机可以点击页面的图片，解决方案就是通过css3给img标签设置不可点击属性。
img{ pointer-events: none; }
这样的话img标签的点击事件就会失效。由此可见在很多的js判断，无论移动端还是小程序，都可以通过这个属性，来设置标签的不可点击属性。
七.h5底部输入框被键盘遮挡
在h5的静态页面会出现一个非常难受的问题，就是当页面出现多个input输入框的时候，导致最下面一个输入框，点击的时候弹出的键盘会遮挡输入框。用户根本不知道自己输入的是什么，对用户的体验非常不友好。解决方案：
1.就是选中当前的DOM元素，让他出现在可视区域的顶部或者底部。代码如下：
document.querySelector('#inputId').scrollIntoView();
八.input标签的常用操作
1.清除input标签的默认样式
input { -moz-appearance: none;outline: 0;text-decoration: none; outline: none; border: 0; }
2.input标签属性placeholder样式修改
input::-webkit-input-placeholder { font-size: px2rem(22);color: rgba(136, 136, 136, 1);font-family: Microsoft Yahei; width: px2rem(50); height: px2rem(60); line-height: px2rem(40); }
3.input 点击输入内容后的样式 focus
input:focus { outline: none; -moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset, 0 2px 7px 0 rgba(0,0,0,.2); -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset, 0 2px 7px 0 rgba(0,0,0,.2); box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset, 0 2px 7px 0 rgba(0,0,0,.2); }
4.input标签可读不可编辑
方法1: οnfοcus=this.blur() 当鼠标放不上就离开焦点
<input type="text" name="input1" value="中国" οnfοcus=this.blur()>
方法2:readonly
<input type="text" name="www.xxx" readonly="readonly" />
<input type="text" name="input1" value="中国" readonly>
<input type="text" name="input1" value="中国" readonly="true">
注意： readonly表示此域的值不可修改，仅可与 type="text" 配合使用，可复制，可选择,可以接收焦点，后台会接收到传值
方法3: disabled
<input type="text" name="input1" value="中国" disabled="true">
readonly="readonly" 推荐
注意： readonly表示此域的值不可修改，仅可与 type="text" 配合使用，可复制，可选择,可以接收焦点，后台会接收到传值
disabled="true" 此果文字会变成灰色，不可编辑，不可点击。
readOnly="true" 文字不会变色，也是不可编辑的，可点击。
css屏蔽输入：<input style="ime-mode: disabled">
有两种方法第一：disabled="disabled"这样定义之后被禁用的 input 元素既不可用，也不可点击。第二：readonly="readonly" 只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本.
今天在实际开发中遇到一类比较特别的关于IOS的时间比较和取舍问题。其实也就是在IOS上，一般后台给到的数据都是年月日，时分秒都具备的。但是前端页面在显示的时候，有时候没有必要那么的具体，可能就要舍弃时分秒。但是同时也要兼容IOS。所以今天给大家介绍一种非常使用的方法：
var time_register = data.public_user_info.time_register;（后端给的字段显示时间格式）
var time_register1 = time_register.substr(0,10);（把时分秒给去掉，只保留年月日）
var time_register2 = time_register1.replace(/-/g, "-");（兼容IOS）
欢迎关注 技术团队的知乎账号 我们凭团队实例运作以下专栏， 必须干货！
互联网创业专栏 (我们小伙伴的创业历程)
与您一起聊技术 (APP、微信公众号、小程序、H5 技术总结)
互联网产品研发管理 (我们公司对产品结构的管理思路)
我们是不一样的技术团队:
（我们认为:所有的企业行为，都解读为交易行为，无论是摩拜单车、外卖平台、自动售货机、招聘社区、家政服务，都用交易的语言来表达，我们专栏里面有很多实际案例和开发过程和交付流程）
（类似于元素周期表，我们把交易拆解成元素级别，根据业务定制组装，完全复原个性化需求，我们专栏里面有很学术也很实际的介绍)
(每个项目设置: 导师成长基金、参与人员的奖励，全员股权池，创业氛围浓郁，我们专栏公开分享了我们的一些经验)
(专治各种复杂的业务场景， 我们通过简洁的元素和分层组合，来完成复杂场景的业务定制，我们在这一块有非常多的案例，在互联网创业专栏里面有详细描述)
扫一扫
3311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
