最近在做了几个h5页面后,碰到了许多iOS和Android上的差异,特在此总结一下,以防再入坑。
- title 问题。
Android可以用 document.title来动态改变标题,ios不可以,需要通过加入一个iframe来让ios刷新title - 微信分享问题
在h5做分享到微信时,会出现Android截取地址栏里 # 后的内容,iOS正常,所以用vue的hash模式开发h5时,若有此类问题,需配置成history模式,具体请参照官网。 - 刷新问题
vue开发时页面刷新有两种方法,一种是window.reload,另外一种是this.$router.go(0),目前发现,前一种在Android上如果地址栏地址未发生变化则无效,后一种在iOS上无效,所以建议在vue开发时,尽可能的不用刷新来做业务逻辑,尽可能的使用数据驱动页面更新。这也是vue开发的特点。 - input 问题
iOS上h5的input一直是个bug,输入以后不可以滑动,就是说输入的字超过了容器大小后,不能大小适应或者滑动查看以前已输入的内容,暂时的解决方案是用div做富文本编辑器,模拟input,但效果并不是很好,目前没有更好的代替方案。 - 时间问题
对于时间date对象,ios上是不能识别 类似 2019-02-18 这种格式的,必须是 2019/02/18这种格式,而Android是完全两者都可识别,所以需要做下面这样的适配。
后面研究发现,还可以使用下面这种方式同样兼容。new Date(2019, 06,01)
- iOS上h5的动态插入的div添加click事件,在没有cursor:pointer;时,会出现点击click事件失效,同时,iOS上的h5会出现双击页面放大的情况。需要加上下面的代码。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- video 标签, video在移动端的兼容性实在是太多,先说目前碰到的。
- 自动播放。静音播放两者都可以成功。Android可以利用iframe或者autoplay属性完成。微信内置浏览器需要属性
x5-video-player-type="h5"
,或在wx.ready回调中使用video.play。
- http 和https的混用。ios上http 和https不能混用,android上无影响。解决的办法是使用统一的协议。
本文将会随着本人的开发持续更新,欢迎大家补充和纠正。