## 小程序的兼容问题 ### IOS对绝对定位要求比较严格 top left 都要写不然会错乱 ### ios平台 new Date 不兼容 `let d = new Date(TokenEndDate.replace(/-/g,"/")) // 格式化时间` *** ## 微信H5的兼容问题 ### 安卓和ios的不兼容 * **ios端兼容input光标高度** > 高度height和行高line-height内容用padding撑开 * **ios端微信h5页面上下滑动时卡顿、页面缺失** > `-webkit-overflow-scrolling: touch; ` But,这个属性是有bug的,比如如果你的页面中有设置了绝对定位的节点,那么该节点的显示会错乱,当然还有会有其他的一些bug >> 扩展知识:-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文 * **ios键盘唤起,键盘收起以后页面不归位** > 固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件 `@blur.prevent="changeBlur()"` ``` changeBlur(){      let u = navigator.userAgent, app = navigator.appVersion;        let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if(isIOS){          setTimeout(() => { const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0 window.scrollTo(0, Math.max(scrollHeight - 1, 0))           }, 200)        }     } ``` * **安卓弹出的键盘遮盖文本框** > 安卓微信H5弹出软键盘后挡住input输入框 给input和textarea标签添加focus事件,如下,先判断是不是安卓手机下的操作,当然,可以不用判断机型,Document 对象属性和方法,setTimeout延时0.5秒,因为调用安卓键盘有一点迟钝,导致如果不延时处理的话,滚动就失效了 ![](https://img.kancloud.cn/28/b9/28b9c85df557402529be17d1bd50d9e5_776x268.png) >> Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。而Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动 * **Vue中路由使用hash模式,开发微信H5页面分享时在安卓上设置分享成功,但是ios的分享异常** ios当前页面分享给好友,点击进来是正常,如果二次分享,则跳转到首页;使用vue router跳转到第二个页面后在分享时,分享设置失败;以上安卓分享都是正常 ![](https://img.kancloud.cn/17/63/17630c3e06340f1dd6e9c225ea3f575d_875x462.png)