关于h5在ios和Android上的差异

最近在做了几个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会出现双击页面放大的情况。需要加上下面的代码。

video 标签， video在移动端的兼容性实在是太多，先说目前碰到的。
1. 自动播放。静音播放两者都可以成功。Android可以利用iframe或者autoplay属性完成。微信内置浏览器需要属性 x5-video-player-type="h5"，或在wx.ready回调中使用video.play。
http 和https的混用。ios上http 和https不能混用，android上无影响。解决的办法是使用统一的协议。
本文将会随着本人的开发持续更新，欢迎大家补充和纠正。

更多相关文章

随机推荐