You're never really done for, as long as you‘ve got a good story and someone to tell it to.

qrcodejs2生成二维码在安卓手机偏移问题

问题

今天在做一个活动页面的时候,安卓设备上的二维码莫名其妙的偏移到下方,因为手机上不能查看元素,所以研究了好一会。

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";
        }
# qrcode   qrcodejs2  

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×