H5移动端IOS/Android兼容性总结,持续更新中…

2018-10-23 18:53:57

H5 移动端 IOS/Android 兼容性总结,持续更新中…

1. IOS 不识别日期("2018-07-01 08:00:00")

new Date("2018-07-01 08:00:00")在Android下正常显示可以直接进行各种操作转化,而在IOS下为invalid date,获取到的时间戳为NaN,确实有点坑啊,只能识别new Date("2018/07/01 08:00:00")这种的,所以需要转化一下,解决方法为统一增加.replace(/-/g,'/');

new Date("2018-07-01 08:00:00".replace(/-/g,'/'));

2. IOS fixed元素抖动问题

在ios11以上的版本里,当快速滑动页面的时候,页面滚动期间,fixed定位的头部会随着页面的滑动滑上去,等到上滑动作执行完毕时,头部才又出现,这个问题在安卓及ios11以下的版本都是没有的。

下面这种布局方式相当于只是滑动中间部分,而非整个view,就可以很好的解决fixed抖动这个问题。

// 布局如下:
<header><header>
<div class="wrapper"></div>
<footer></footer>

// 样式如下:
header {
  width: 100%;
  height: 30px;
  position: fixed;
  top: 0;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.wrapper {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  bottom: 30px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
footer {
  width: 100%;
  height: 30px;
  position: fixed;
  bottom: 0;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
如果说人生是一场旅行,而我是这场旅行的主人!