原文地址
前些日子一直在做一些微信公众号的H5开发，在开发过程中遇到了不少坑。记录一下：
- 视频
Android版的视频播放必须全屏，没有办法自定义video的width和height，而且在Android版中视频的层级是最高的，没有办法覆盖，滚你z-index设成多少都没用。（这两个问题暂时没有找到解决办法）
ios版这两个问题都没有。
视频无法自动播放，目前的解决办法是用户触摸屏幕的时候出发视屏播放事件。（注：video的src要卸载source里面） - 扫码识别
Android版的没有什么问题。在iPhone上出现了二维码长安识别不了的办法，找了很久都没找到问题，网上有说是位置偏移的，然后用两张图一张放在正确的位置不显示，一张显示用。我们找了半天也没有找到二维码正确的位置，最后用了一个比较猥琐的办法，两张二维码的图，一张显示，一张覆盖整个页面然后visibility: hidden;,幸好页面上没有什么需要点击的地方... - 页面滚动不顺畅
在ios版的微信里会出现问题，解决办法给要滚动区域的元素加上这个属性-webkit-overflow-scrolling: touch;。 - ios版会把页面中的一串数字识别成电话
ios版会把页面中的一串数字识别成电话然后触摸会调用系统不打电话，解决办法加上meta
<meta content="telephone=no,email=no" name="format-detection" />
- Android文字变大
在一些文字过多的地方Android版微信会把文字变大而ios则不会，这样会导致排版错乱页面变得很丑...
解决的办法是给包裹文字的元素加上display: inline-block;。 - 点击元素产生背景
加上这个-webkit-tap-highlight-color: rgba(0,0,0,0); - click的300ms延迟
要么禁止页面的缩放，要么如果使用了zepto，则用tap代替click，要么使用fastclick。 - 缓存问题非常蛋疼
ios可以通过刷新解决，Android用户需要取关然后退出微信重新关注才可以（也可以在X5调试页面清除这些缓存）。建议打包的时候给文件加上版本号，或者用hash字符串作为文件名。 - 动态更改title
在andriod下没有问题，但是在ios下就会有这个问题，有时候更改会失败，可以用iframe来解决这个问题，代码如下（我是用vue写的）
<template>
<div>
<iframe :src="bugTitle" style="display: none"></iframe>
</div>
</template>
<script>
...
data() {
return {
bugtitle: ''
}
}
methods: {
setTitle(title) {
document.title = title;
// 判断是否为ios，ios通过iframe来刷新title
if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
this.bugTitle = '/favicon.ico' + Date.parse(new Date());
}
}
...
</script>
...
写在最后，在微信上还有很多的问题，暂时想不起来了，以后想起来再写。
之前在知乎看看多过这样一句话 “移动端的微信全等于pc端的IE6”，嗯 +1。
