印象最深的一个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;
}

完美解决!

目录
相关文章
|
移动开发 小程序 API
微信外部浏览器或短信链接唤起微信小程序的解决方案
微信外部浏览器或短信链接唤起微信小程序的解决方案
2405 1
|
JavaScript
js判断是否微信PC端打开内置浏览器
js判断是否微信PC端打开内置浏览器
|
iOS开发 开发者
iOS微信分享配置universal links步骤
iOS微信分享配置universal links步骤
2850 58
|
12月前
|
Web App开发 移动开发 前端开发
H5微信外支付(移动端浏览器)
H5微信外支付(移动端浏览器)
401 1
 H5微信外支付(移动端浏览器)
|
Web App开发 Linux Android开发
Chrome谷歌浏览器的WeChat微信模拟器,既可以设置模拟很多型号的手机设备Mozilla
Chrome谷歌浏览器的WeChat微信模拟器,既可以设置模拟很多型号的手机设备Mozilla
|
移动开发 小程序 前端开发
php + h5使用 scheme页面跳转微信小程序-其他浏览器一键跳转到微信并打开小程序
php + h5使用 scheme页面跳转微信小程序-其他浏览器一键跳转到微信并打开小程序
345 0
|
移动开发 JavaScript
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片
649 0
|
Web App开发 移动开发 Android开发
解决IOS Safari浏览器H5页面上下滑动时卡顿、页面缺失的问题
解决IOS Safari浏览器H5页面上下滑动时卡顿、页面缺失的问题
|
视频直播 API iOS开发
微信团队分享:详解iOS版微信视频号直播中因帧率异常导致的功耗问题
功耗优化一直是 app 性能优化中让人头疼的问题,尤其是在直播这种用户观看时长特别久的场景。怎样能在不影响主体验的前提下,进一步优化微信iOS端视频号直播的功耗占用,本文给出了一个不太一样的答案。
327 0
|
移动开发 JavaScript 前端开发
【前端】微信H5,js判断是否在微信浏览器中打开
【前端】微信H5,js判断是否在微信浏览器中打开
280 0

热门文章

最新文章