二维码能被长按识别,但因为某种原因识别区域发生了偏移
meta标签定义了默认缩放为一倍就能识别,不定义就不能识别。
网上是这么说的:
meta标签定义了默认缩放为一倍就能识别,不定义就不能识别。于是我将原来的
<meta name="viewport" content="target-densitydpi=device-dpi, user-scalable=no">
改成了
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1">
虽然样式飞了但二维码识别正常了。
看来问题就出在这里了。经过尝试,我发现:
target-densitydpi=device-dpi和width=device-width是冲突的。加上后者二维码识别正常了,但样式肯定要重新定义,若不加,样式好使,但二维码识别就不正常了。定义样式是小事,但归根结底,发生偏移的原因到底在哪呢?
那么问题来了
目前我司的项目的适配是按手机淘宝的方案来的也就是flexible
那么在plus下的话data-dpr="3"
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
点击区域和大小都被缩放了,里面的位置也相对变大点击去也会相对变大
问题的解决
1.找到了这个原因,剩下的就是老老实实的,按照实际尺寸修改css了,将所有定义了固定尺寸的元素的宽高,包括字体都除以2,保留所有百分比定义的尺寸。
2.用两个二维码图片,将一个放在另外一个能识别的位置,然后设置真正能够识别的那个的透明度为0。这样就能模拟识别二维码了
或许是因为识别二维码的机制不同,也可能是因为浏览器内核原因目前只发现ios有这个问题
参考网站https://segmentfault.com/a/1190000005871183