背景：
活动是在微信浏览器里使用的，主要坑点在背景音乐自动播放，生成海报图。海报图选择了html2canvas去生成，回想起来全是坑。
一、背景音乐自动播放问题
音乐自动播放在安卓里都好说，一个autoplay解决。
主要是在ios里需要特殊处理，分为2个场景：
（1）h5页面在微信浏览器中：此时可以借助wx.ready，拿到video，使它开始播放，直接贴上代码。
// 微信里自动播放音频
export function iosPlay(id, configParam) {
wx.ready(function() {
var globalAudio=document.getElementById(id);
if(configParam) {
globalAudio && globalAudio.play();
} else {
globalAudio && globalAudio.pause()
}
});
}
（2）h5页面在app中：
此时自动播放受到webview的控制，需要app伙伴配合修改。
二、海报问题
（1）生成海报时背景音乐重叠问题
这个原因是html2canvas插件导致，猜测是它生成海报时，会把所有dom元素再过一遍，找到我们选中的dom节点，而这个时候，video的autoplay又被触发了一遍，导致背景音乐重叠。
（2）生成海报时图片问题
1）把html2canvas的设置useCors: true。允许其加载cors的图片。
2）遇到报错
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
解决：
var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;
3）遇到一个问题，有一个动态二维码，是后端返回一个地址，那个地址动态生成返回一个二维码。这样无法画到canvas上，改为后端直接返回图片base64。
三、oppo半屏问题
低版本安卓机上，键盘顶起再收起之后，可显示的屏幕只有一半了。
解决办法是在输入框blur的时候加上window.scroll(0, window.innerHeght)。
四、ios低版本机型字体放大问题
在某些小屏手机上，一些浏览器会为了可读性，放大字体，这样容易导致布局错乱。
通过 -webikt-text-size-adjust:none可禁用此功能。
