印象最深的一个bug-----ios 微信内置浏览器微信二维码长按无法识别

简介: ios 微信内置浏览器微信二维码长按无法识别

以前在做前端H5的过程中,有这样一个场景,展示可以让用户长按识别的一个公众号二维码,页面做出来后测试发现在安卓版微信能正常识别,但ios版微信(iPhone或iPad)皆无法正常识别。出来问题一开头固然是怀疑自己的代码有问题,上网搜索相关资料,尝试以下方案均无法解决:
1、定位方式由absolute改为传统的margin(据说绝对定位会导致这个问题);
2、修改viewport上的maximum-scale大于1(网络上看到的解决方案);
3、网络上有说用position:fixed;定位会导致这个问题,但没有用到这个属性;
后来偶然发现可识别区域恰巧比正常地方稍微往上一点,而“比正常地方稍微往上一点是多少呢?经过多次人工检测,发现上文”比正常地方稍微往上一点“的高度正是微信标题栏+系统状态栏的高度(64px)。基本上可以确定是iOS版微信的本身问题,原因应该是标题栏+系统状态栏的高度,经过与微信ios开发人员的反馈沟通,确定是微信的bug。
解决方案的话有两个:
1.通过img增hpadding 增大可接触面积;这个需要微调。
2.为二维码图片本身增加透明底部背景,类似下图的样子,前端上用户是看不到的;但有个缺点就是如果用户保存二维码后则不是那么好看。微信截图_20211103154008.png
其他老哥的方案

类似等高布局的原理,注意: 
1.给你的二维码加上一个巨大的padding:1000px; 
2.二维码收起来等值的margin:-1000px; 
3.这时候给你的父元素,overflow:hidden 防止布局溢出(看你具体情况) 
4.这个时候,你就发现,长按屏幕中任何位置,都可以读取出二维码了

借助padding 可以去实现。margin 做不到

我的方案

<img src="img/erweima.png" class="tan_img" />
<img src="img/erweima.png" class="tan_img ios_ma" />
设置第二个img样式
  img.ios_ma{
    width: 300px;
    height: 300px;
    position: absolute;
    left:0;
    top: -200px;
    opacity: 0;
}

完美解决!

目录
相关文章
|
8月前
|
移动开发 小程序 API
微信外部浏览器或短信链接唤起微信小程序的解决方案
微信外部浏览器或短信链接唤起微信小程序的解决方案
1663 1
|
4月前
|
iOS开发 开发者
iOS微信分享配置universal links步骤
iOS微信分享配置universal links步骤
1397 58
|
3月前
|
Web App开发 移动开发 前端开发
H5微信外支付(移动端浏览器)
H5微信外支付(移动端浏览器)
57 1
 H5微信外支付(移动端浏览器)
|
3月前
|
算法 小程序 Java
java制作海报三:获取微信二维码详情,并改变大小,合成到海报(另一张图片)上
这篇文章介绍了如何使用Java获取微信小程序的二维码,并将其调整大小后合成到海报(另一张图片)上。
59 0
|
6月前
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
431 0
|
6月前
|
移动开发 小程序 前端开发
php + h5使用 scheme页面跳转微信小程序-其他浏览器一键跳转到微信并打开小程序
php + h5使用 scheme页面跳转微信小程序-其他浏览器一键跳转到微信并打开小程序
140 0
|
8月前
|
Web App开发 Linux Android开发
Chrome谷歌浏览器的WeChat微信模拟器,既可以设置模拟很多型号的手机设备Mozilla
Chrome谷歌浏览器的WeChat微信模拟器,既可以设置模拟很多型号的手机设备Mozilla
|
8月前
|
小程序 JavaScript
微信小程序长按识别图片二维码功能
微信小程序长按识别图片二维码功能
550 0
|
8月前
|
移动开发 JavaScript
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片
290 0
|
8月前
|
小程序 JavaScript
微信小程序显示二维码?
微信小程序显示二维码?