【微信H5开发】大屏iPhone无法识别到微信二维码

问题

有个页面展示了公众号的二维码,用户可以长按然后在弹出菜单中识别该二维码进而跳转到公众号中,识别二维码这一步在android机器和非大屏的iPhone上都是正常的,但是唯独有一部iPhone 6s plus死活不能识别出来该二维码,这就奇了怪了。

原因

网上找了一下,发现有不少文章说这个问题,但是都没提到是大屏iPhone才会这样,都是相对比较普适的问题。引起我注意的是,总结会导致二维码识别失败的原因里,有一条提到对viewport的缩放有可能会导致这个问题。

一下就想到了,我们项目里使用了手淘的flexible库来进行屏幕的自适应,flexible会在对retina屏以上的iPhone进行viewport的缩放设置,比如iPhone 6的layout viewport会被设为750px宽,而iPhone 6 plus的layout viewport会被设为1242px宽,从而能够精确的适配750px格式的设计稿。

解决

手淘的flexible库如果设置了initial-dpr=1,就会强制认为设备的dpr为1,从而不会对layout viewport再进行缩放,所以,我们在<head>元素下增加这样一个<meta>元素即可

<meta name="flexible" content="initial-dpr=1"> 

果然,问题解决了,二维码可以正确识别。

题外话

手淘的flexible库虽然对iPhone的设备进行了高度的适配,但是实践下来,除了上面这个微信二维码识别的坑外,还遇到了使用其他的ui库,会出现ui库产生的ui界面在iPhone设备上偏小等不兼容的问题(比如饿了么的mint-ui库)。
权衡之下,弊大于利,还是暂时用上面的方法,把对iPhone的设备自适应给停掉了,看来后续还是要探索一些更适合的UI自适应方法。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • WebSocket-Swift Starscream的使用 WebSocket 是 HTML5 一种新的协议。它实...
    香橙柚子阅读 24,223评论 8 184
  • 哈喽。大家好!很高兴又可以和大家一起学习健康知识,那在大家的生活中健康营养的分量高不高呢?那就一起学习吧! ...
    依之梦盈阅读 1,154评论 1 6
  • 前两天我在读《精进如何成为一个很厉害的人》这本书时,书中提到梁漱溟曾说对待时间要郑重。 这是我第二次读这本书,第一...
    简溪_向日葵阅读 286评论 0 0
  • 先说一下,今敏是谁?今敏是日本的一名动画电影,比较出名的作品是千年女友,未麻的部屋,红辣椒和东京教父。当然对于日本...
    lispppppp阅读 466评论 1 0