微信网页长按二维码不识别问题
微信网页长按二维码不识别问题
coton_chen 发表于10个月前
微信网页长按二维码不识别问题
  • 发表于 10个月前
  • 阅读 15
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: 解决微信客户端内的网页开发中长按二维码无法触发系统下拉识别二维码的功能

问题现象:

如下图,这是设计的布局方式,其中二维码宽高为200px,最下面为一个长页,然后点按钮弹出一个浮层(div + position:absolute),然后其中的二维码怎么样就是不识别。google到这个文章,但是没有解决问题。

问题测试:

然后采用新建一个空白html页面进行测试:

测试1,结果:二维码不识别。代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=640, user-scalable=no"/>
</head>
<body>
    <div style="position: absolute;top:300px">
        <img src="images/qrcode.png">
    </div>
</body>
</html>

测试2,结果:二维码不识别,代码如下:

<body>
    <img src="images/qrcode.png" style="position: absolute;top:500px">
</body>

测试3,结果:二维码不识别,代码如下:

<body>
    <img src="images/qrcode.png" style="margin-top:500px">
</body>

测试4,结果:可以识别二维码,最终有效代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=640, user-scalable=no"/>
</head>
<body>
    <div style="position: absolute;top:0px;z-index:9;">
        <img src="一个1px*1px的透明png图片" width="640px" height="想要的高度px" alt="">
        <img src="images/qrcode.png">
    </div>
</body>
</html>
共有 人打赏支持
粉丝 21
博文 19
码字总数 11068
×
coton_chen
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: