原文地址
前些日子一直在做一些微信公眾號的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。
