移动端页面中遇到的iOS bug

吐槽

由于咱家穷，都是用的土鳖的安卓机，然后每次测试的时候，都出一堆意想不到的问题orz，这时候我的心情是非常郁闷的

不对啊，我手机上没问题啊。不信你看！

这时候，对方掏出了象征高贵身份的ihpone

你看我手机上就有问题，你这样不行，要考虑兼容性

这我就更难过了。所以才有了这个文章

---

正文

以下是正文。

getTime()，getFullYear()等方法返回NaN

因为前台显示时间，有时候需要对时间日期进行格式化，就调用了这些方法，但是iOS并不支持这些方法。怎么办呢。
这是在其他网站上找到的方法

所以想要正确显示时间在iOS上，应该这么写

new Date(“2018-02-15 20:30:00”.replace(/-/g,’/’)).getTime(); // 解决了问题！！

> 当然getFullYear() ,getMonth(),getDate()已需要这样写：
> ```
new Date("2018-02-15 20:30:00".replace(/-/g,'/')).getFullYear()

还有种方法就是使用一个叫momentjs的第三方插件。

伪类选择器:active无效

有时候移动端页面需要做一些按键反馈啥的，首先想到的就是伪类选择器。
然而自己手机上好好的，iOS上又不行了。因为在iOS种，需要一串js代码激活这个行为才行

document.addEventListener('touchstart', function(){})

加上去果然行了

input框要多次点击才弹出手机键盘

这问题困扰了我一天。最后是一位dalao帮我解决了。
因为我页面用了fixed布局，ios手机键盘弹起导致input无法聚焦，只需要在blur的时候让页面回到初始的位置就行了。参考代码

function onBlur() {
  var currentPosition, timer;
  var speed = 1; //页面滚动距离
  timer = setInterval(function() {
    currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
    currentPosition -= speed;
    window.scrollTo(0, currentPosition); //页面向上滚动
    currentPosition += speed; //speed变量
    window.scrollTo(0, currentPosition); //页面向下滚动
    clearInterval(timer);
  }, 1);
}

类似的问题还有什么input框被键盘挡住等等的，这里就不累述了。
总之，iOS种慎用fixed

底部margin-bottom无效

有时候页面底部要显示导航，会遮住中间页面内容的显示，这时候一般加个margin-bottom就ojbk了，但是在iOS上面没用效果，在安卓上完全正常…

不过这个解决起来简单，直接加个空div就完事了。

参考资料

• http://www.fly63.com/article/detial/428
• https://segmentfault.com/a/1190000006864910
• https://blog.csdn.net/u010200636/article/details/85004087