关于viewport引起的微信二维码识别区域偏移的问题讨论与解决

Miracle_lihb 发布于2019-08-29 10:56 / 1093人阅读

摘要：暂时排除脚本原因。移除二维码所有样式，发现并不是不能识别到二维码而是识别区域发生了偏移。图移除所有元素，页面上只留一张二维码，发现识别区域变大。由此产生的问题和猜测问题就是元素偏移了。。。

一、问题概述

在开发一个含有二维码的微信页面时，我遇到了这样一个问题：使用iPhone第一次进入该页面时，二维码可以长按识别，但第二次进入时长按无法识别到二维码。安卓机都能识别。

二、我和同事进行了以下尝试：

移除控制进入条件的脚本，即部分第一次第二次，长按不能识别二维码。暂时排除脚本原因。

移除二维码所有样式，发现并不是不能识别到二维码而是识别区域发生了偏移。（图1）

移除所有元素，页面上只留一张二维码，发现识别区域变大。虽然整张图都被识别了但图片外面的区域也会被识别。（图2）

图1

图2
阶段性结论：二维码能被长按识别，但因为某种原因识别区域发生了偏移。

三、进一步尝试：

在网上简单搜索了偏移问题后，我注意到一条关于标签的，大意如下：

meta标签定义了默认缩放为一倍就能识别，不定义就不能识别。于是我将原来的

改成了

虽然样式飞了但二维码识别正常了。
看来问题就出在这里了。经过尝试，我发现：
target-densitydpi=device-dpi和width=device-width是冲突的。加上后者二维码识别正常了，但样式肯定要重新定义，若不加，样式好使，但二维码识别就不正常了。定义样式是小事，但归根结底，发生偏移的原因到底在哪呢？

四、分析

关于适配屏幕的标签

UI设计人员都知道因为pc和移动设备屏幕密度像素的不同在输出视觉稿的时候要标明空间的倍数大小，所谓的@1x、@2x就是这个原因。然后在页面head里写这样一个标签：

即：宽度强制转换成设备宽度，默认缩放比例为1，最大缩放比例1，不允许手动缩放。
比如按照iPhone6出的设计稿，在开发的时候空间尺寸就要除以2，iPhone6 plus出的设计稿，尺寸就除以3。具体原理请看图3
但是如果不想进行单位换算，可以用

即：分辨率转为设备分辨率……（后边都一样）
强制将搭建好的页面适应移动设备的分辨率。原理就好比是将大尺寸的图片缩小显示并不影响清晰度。
这样给设计和前端开发人员都带来很大的方便。既不用设计出标注，也不用切两套控件出来了。

由此产生的问题和猜测

问题就是元素偏移了。。。但我猜测应该是这样的：
可视的页面呗强制“塞”到手机屏幕里，但页面本身仍然是原始大小的（图4）。这样看来，并不是触控区域偏移了而是，可视区域被我们“塞到”了移动设备里。发生偏移的实际上是我们看到的那部分。

图3

图4

五、问题的解决

找到了这个原因，剩下的就是老老实实的，按照实际尺寸修改css了，将所有定义了固定尺寸的元素的宽高，包括字体都除以2，保留所有百分比定义的尺寸。哪里不对改哪里，工作量着实不小。这样搭建出来的页面就是实际大小的，没有经过任何缩放，图片该在哪就是在哪不会有偏移了。

六、不能解释的问题

为什么该问题只有iPhone存在，或许是因为识别二维码的机制不同，也可能是因为浏览器内核原因，安卓的浏览器比较健壮。

为什么第一次进入页面的时候没有发生偏移？

欢迎，感谢有类似经历的同行，老师参与讨论，留下您的宝贵经验。

服务器托管 idc机房托管关于微信公众号的问题关于云桌面与云服务器的问题关于云桌面与云服务器的问题吗我怎样绑定老公的微信

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111314.html

关于viewport引起的微信二维码识别区域偏移的问题讨论与解决

摘要：暂时排除脚本原因。移除二维码所有样式，发现并不是不能识别到二维码而是识别区域发生了偏移。图移除所有元素，页面上只留一张二维码，发现识别区域变大。由此产生的问题和猜测问题就是元素偏移了。。。一、问题概述在开发一个含有二维码的微信页面时，我遇到了这样一个问题：使用iPhone第一次进入该页面时，二维码可以长按识别，但第二次进入时长按无法识别到二维码。安卓机都能识别。二、我和同事进行了...

everfight 2019-08-01 15:25 评论0 收藏0
【Hello CSS】第三章-浏览器的视图与坐标

摘要：本篇则会介绍浏览器的视图与坐标。返回值为视觉视口的缩放比例视觉视口宽度，返回值为像素值。那么接下来我们来了解一下浏览器中的坐标系系统。在数学里，笛卡尔坐标系英语，也称直角坐标系，是一种正交坐标系。作者：陈大鱼头 github： KRISACHAN 在上一篇【Hello CSS】的第二章第二章-CSS的逻辑属性与盒子模型中提了个问题：为什么Flex box跟Grid box的是...

Jeffrrey 2019-08-30 10:49 评论0 收藏0
微信web开发遇到的坑

摘要：由于苹果的限制必须配合微信接口做处理。中已修复标签的设置，会影响二维码识别我试出来的微信客户端内，如果页面链接中含有未转码的特殊字符，可能会导致二维码无法识别以上如果遇到新的问题会继续更新缓存控制 http接口数据缓存一直在做spa，应用内的页面切换没有接口数据缓存的问题，而从应用内切换到外部再回来的话，如果接口地址参数都不变，那么之前请求过的接口，会使用上一次请求拿到的数据，抓包...

caige 2019-08-21 11:42 评论0 收藏0