原文地址
前些日子一直在做一些微信公眾號的H5開發(fā)态辛，在開發(fā)過程中遇到了不少坑迅耘。記錄一下：
- 視頻
Android版的視頻播放必須全屏击敌，沒有辦法自定義video的width和height是偷，而且在Android版中視頻的層級是最高的感挥，沒有辦法覆蓋，滾你z-index設(shè)成多少都沒用冻辩。（這兩個問題暫時沒有找到解決辦法）
ios版這兩個問題都沒有源织。
視頻無法自動播放，目前的解決辦法是用戶觸摸屏幕的時候出發(fā)視屏播放事件微猖。（注：video的src要卸載source里面） - 掃碼識別
Android版的沒有什么問題。在iPhone上出現(xiàn)了二維碼長安識別不了的辦法缘屹，找了很久都沒找到問題凛剥，網(wǎng)上有說是位置偏移的，然后用兩張圖一張放在正確的位置不顯示轻姿，一張顯示用犁珠。我們找了半天也沒有找到二維碼正確的位置，最后用了一個比較猥瑣的辦法互亮，兩張二維碼的圖犁享，一張顯示，一張覆蓋整個頁面然后visibility: hidden;,幸好頁面上沒有什么需要點擊的地方... - 頁面滾動不順暢
在ios版的微信里會出現(xiàn)問題豹休，解決辦法給要滾動區(qū)域的元素加上這個屬性-webkit-overflow-scrolling: touch;炊昆。 - ios版會把頁面中的一串?dāng)?shù)字識別成電話
ios版會把頁面中的一串?dāng)?shù)字識別成電話然后觸摸會調(diào)用系統(tǒng)不打電話，解決辦法加上meta
<meta content="telephone=no,email=no" name="format-detection" />
- Android文字變大
在一些文字過多的地方Android版微信會把文字變大而ios則不會，這樣會導(dǎo)致排版錯亂頁面變得很丑...
解決的辦法是給包裹文字的元素加上display: inline-block;凤巨。 - 點擊元素產(chǎn)生背景
加上這個-webkit-tap-highlight-color: rgba(0,0,0,0); - click的300ms延遲
要么禁止頁面的縮放视乐，要么如果使用了zepto，則用tap代替click敢茁，要么使用fastclick佑淀。 - 緩存問題非常蛋疼
ios可以通過刷新解決，Android用戶需要取關(guān)然后退出微信重新關(guān)注才可以（也可以在X5調(diào)試頁面清除這些緩存）彰檬。建議打包的時候給文件加上版本號伸刃，或者用hash字符串作為文件名。 - 動態(tài)更改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激捏。
