首页 > 技术文章 > ios下iphone的plus下

lichuntian 2016-11-28 18:55 原文

二维码能被长按识别,但因为某种原因识别区域发生了偏移

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

推荐阅读