问题
今天在做一个活动页面的时候,安卓设备上的二维码莫名其妙的偏移到下方,因为手机上不能查看元素,所以研究了好一会。
IOS上的效果
Android上的效果
原因
主要是因为在qrcode生成二维码的时候,会生成canvas和img标签。
然后在Android上使用canvas标签隐藏img而且没有设置src属性,在IOS上隐藏canvas标签使用img.
所以就产生了样式不兼容问题。
IOS的qrcode
Android的qrcode
解决方案
使用canvas还有导致长按无法识别二维码的问题,所以这里就直接强制使用img标签
const device = navigator.userAgent;
const isAndroid = ~device.indexOf("Android") || ~device.indexOf("Adr"); //android终端
const imgEle = this.$refs.qrCode.lastChild;
const canvas = this.$refs.qrCode.firstChild;
if (isAndroid) {
imgEle.src = canvas.toDataURL("image/png");
canvas.style.display = "none";
imgEle.style.display = "block";
}