记得2014年开发移动端的时候，那时候苹果4如日中天，觉得苹果手机超级好用，写的效果苹果兼容性也特别好，觉得安卓机真是弱爆了。
现在写移动端页面，几乎都是苹果的bug,一把泪一把泪的。
只是记录工作中遇到的bug，所以bug会杂乱无章，有一条就加一条。
ajax执行success, 执行操作完成后跳转页面，在某些ios手机端，操作并没有执行，直接跳转。
解决方法：要在ajax方法执行完成后，再执行页面跳转。即把 window.location.href = 'xxx.html'; 写到 complete 方法里。
ios 日期格式化 的坑。javascript根据字符串创建Date对象，在ios中无效
今天在测试的时候发现，在Chrome中的如下代码：
new Date(“2014-03-09”);
在Safari以及ios中报错invalid date。经过查阅资料找到类似的问答：
解释与翻译如下：
目前Safari可以支持的标准格式如下：
yyyy/MM/dd MM/dd/yyyy MMMM dd, yyyy MMM dd, yyyy 就是说，并不支持 MM-dd-yyyy，所以转换成 其他格式就可以了。
var date = '2012-1-16 13:20';
var time = date.replace(/-/g,"/");
dateTime = new Date(time).getTime();
css3 的 animation keyframe 动画，在pc，安卓正常，ios无动画。
解决方案：每个动画样式，新增一个 -webkit- 前缀样式，所以css3动画兼容要写全，不能偷懒。
微信开发，ios播放音频的时候报错 The element has no supported sources？
音频资源是 获取后台的。在手机端安卓没有问题。
ios 不能正常播放，我是用vue写的，第一次进入的组件时候，可以播放，返回上一个组件，再次进入当前组件 播放就不可以了。 困扰好久了…头疼。哪位大神知道。
看文档说音频状态为4时，可以播放。测试了下音频 audio的 readyState,安卓和浏览器的都是 4，微信开发者平台是0，ios是0,ios延时5s打印 就是 1，很奇怪…
真是煞费苦心。试了无数次，然后 发呆了好久 偶然间换了思路，就解决了。果然遇到暂时不可解决的bug,不能太钻牛角尖，需要放松~
解决方法：之前是直接用audio标签，通过改变 src 更改音频的播放资源。所以，ios下有问题，但是 每次播放的时候，js里先创建一个audio对象就可以了。
let audio = new Audio();
audio.src = "XXX.mp3";
audio.play();
PS：需要引入微信sdk, wx.ready 后执行播放。
移动端开发，最好不要用 let 等 ES6语法，不兼容低版本， ios 9.3，Android 4.4.4以下均不支持。(非要用ES6,就要使用babel解析了)
因为浏览器大部分都已经支持了，所以，测试的时候，并不能正常进行调试。用户反馈，又没有测试机，面对六百行的js，去找错误，真的很不好找。
加班整整一天，找了很多朋友才帮忙测试出，手机存在的情况，低版本有问题。
然后，差错误，alert 提示都不能正常提示。 原因是js代码解析语法错误，导致整个js就瘫痪了，以至于 bug 很难排查。
所以，要时刻铭记js的兼容性问题，要有良好的书写习惯，不能乱用滥用。
iphone弹出层输入框光标显示的兼容性问题
点击input,弹出键盘的时候，光标就会飘，原因可能是键盘的webview，导致页面滚动，从而影响了光标位置。
这是由于光标焦点没有失去引起的，还有就是在iOS上尽量少用position:fixed定位，尤其是对于iOS 6及其以下。
可以添加以下样式：
html,body{ height:100%; overflow:hidden; overflow-y:auto; }
这样，弹出键盘后顶层的位置也不会再滑动了，光标位置就固定了~
等弹出层结束后，在移除样式，即可。
当然这个，适用于 input 输入框不是特别多的情况，不然一个屏幕展示不完。
所以这时候，就要改动 这个弹出层的布局了， 使用 position:relative 代替 position:fixed
图片之间产生间隙问题。
写页面的时候就遇到了，一直没在意，也不知道什么原因，记得以前，有缝隙，就用margin-top：-3px；去解决的~~ 好懒~
原理：inline-block 和 inline不会完全忽略空格，你的img前后有空格~ 所以会有缝隙。
解决方案：
1.压缩标签，取消换行，这样就没有空格了~~
2.将图片转换为块级对像
3.设置图片的垂直对齐方式。 `img {vertical-align:top;}` bottom等属性也可以。
4.设置父对象的文字大小为0px。 原因是，能改变空格大小？这个我暂时也不太清楚。
5.改变父对象的属性。如果父对象的宽、高固定，图片大小随父对像而定，那麽可以设置 `overflow:hidden;`
6.设置图片的浮动属性。
Jsonp 回调函数应该写到写到闭包外。
以前没有注意到这个问题，只在html里使用 jsonp，然而这次，要在jsonp 后调用其他函数执行，所以就写在了js文件里。
以前的习惯就是 (function(){ ... }) 然后在里面写代码。
然后jsonp就报错，找不到 jsonpcallback, 看了一遍又一遍jsonp的用法，用的都没问题…
然后把整段js 搬到 hmtl里，发现就可以了，才找到这个问题， 回调函数写在了闭包里，然后就没有办法执行Jsonp啦。
真的是，只有遇到问题，才会加深对一些知识的理解。
video 播放，安卓下层级 max高，在其它弹框之上，设置z-index无效。
安卓bug, 等视频播放完毕后，隐藏掉 video标签即可。
注意： 一定要只在安卓的情况下隐藏，否则隐藏了ios系统的，ios全屏播放完毕后，会黑屏。。
唤起软键盘的时候点击完成底部会出现空白
在开发移动端html里，需要唤起ios的软键盘。但是在个别苹果测试机里，发现当软键盘退出后，会多出一块区，导致窗口变小
大部分人提供的解决方案是
//添加onblur监听事件
window.scrollTo(0,0)
的确能解决，可为什么一定要回滚到顶部呢？如果当时的input在第1屏外，这样的用户体验很差。
既然默认给它个滚动就行，那我们就来个相对滚动就OK了
//相对当前滚动位置 向下滚动1像素。
window.scrollBy(0,1)
当然考虑到当前滚动条位置就是在底部时，要做个判断，让他向上滚1个像素
表单 disable 属性，修改背景颜色
input:disabled {
background-color: #ffffff;
opacity: 1;
}
