[移动开发]ios兼容踩坑总结

ios兼容踩坑总结

前言：h5移动端开发，ios会遇到各种兼容适配问题，以上是部分遇到的问题，特此总结。

1、解决ios动画闪白屏问题：

transform: translate3d(0, 0, 0);
-o-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
-webkit-transform:translate3d(0, 0, 0);

2、webview上拉下拉页面背景出现空白(尤其是原本页面是有背景色，且有按钮元素吸底)：

//页面最大容器高度设置为可视区域高度
const visibleHeight = document.documentElement.clientHeight 

//页面最大容器添加伪类，高度一致绝对定位到背景，置于一切元素之下，背景色与页面背景色统一
&:after{
    content: '';
    display: block;
    width:100%;
    height:100%;
    position: fixed;
    z-index: -2;//层级低于一切，只做填充背景用
    left:0;
    bottom:0;
    background-color:@wind-theme;
 }

3、Ios日期 newdate转时间戳有问题，直接使用时间戳

4、微信小程序：tabbar里内嵌的h5页面，跳转tabbar页面：

webview -> 他所属tabbar -> 其他tabbar（安卓正常）
会有短暂的中间页停留，体验不好

navigateTo： 保留当前页面，跳转到应用内的某个页面
redirectTo： 关闭当前页面，跳转到应用内的某个页面。
reLaunch： 关闭所有页面，打开到应用内的某个页面。
switchTab： 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
navigateBack： 关闭当前页面，返回上一页面或多级页面。

if(window.wx && window.wx.miniProgram){
   window.wx.miniProgram.reLaunch({
   	  //使用switchTab会存在以上问题
      // window.wx.miniProgram.switchTab({
          url: '/pages/scanbuyhome/index'
      })
  }

4、解决iphoneX底部白条问题

phoneX页面下拉会出现白色横条;
如果页面内部有计算元素位置，可能会由于白条的出现导致计算位置偏移;
（一定注意内部动画定位等不受影响）

body {
    background-color: #fff;
    overflow: hidden;
}
//body内部最大容器，所有元素都包含在内部
.xxx {
    overflow-y: auto;
    width: 100vw;
    height: 100vh;
}