html页面二维码在微信上识别的问题

12.09

做了一个微信上识别二维码的页面,然而有些手机上识别不了,有些就可以识别,就连我便宜的安卓手机都可以识别,也用了同事的苹果手机也可以,不知道为什么另外几个同事的手机不知道为什么不行,我就找度娘去了,找了很多,看到了这篇的解决方法http://www.cnblogs.com/viphchok/articles/5314874.html

是在<img src="图片位置">外层的元素上添加一个背景图片,我按上面那个链接设置的图片和背景图片的位置,但是按没有图片的位置的(只有背景图片的时候,就不识别不了,而且也没有反应),所以我又试着改成两张图片的位置一致,这样就可以了,

这个我的代码:

这是css:

二维码


.er{

width: 80%;

margin: 2em auto;

}

.erweima{

position: relative;

width: 100%;

height: 20em;

background: url(image/1481262464.png) no-repeat center center;

background-size: contain;

}

.erweima img{

width: 100%;

position: absolute;

opacity: 0;

}

.er p {

text-align: center;

}


html: 

<div class="er">

<div class="erweima">

<img src="图片位置">

</div>

<p>↑长按上方二维码,识别二维码↑</p>

</div>


这个在我的手机上还是一样可以识别的,之后我就发给不能识别二维码的同事,让他再试试这个,他试了,可以了,我也不知道为什么,好奇怪,之后我又在度娘中找了一下,

http://devework.com/weixin-qrcode-bug.html在这个链接中说到是因为微信标题栏+系统状态栏的高度(64px)。影响的识别的效果,他的解决方法是给图片添加内边居使点击的区域增大来解决。

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 本书介绍 你是不是对Django的学习感到迷茫?是不是对网上零星的教程感到绝望?是不是苦于没有可以迅速上手的实例而...
    阡陌3536阅读 1,332评论 0 0
  • 相信很多朋友都遇到过这样的一种情况吧,老板要求一个二维码集成2个链接(安卓和苹果),手机一扫就可以自动识别安卓机和...
    SYOL阅读 2,444评论 0 3
  • 友谊,今天突然收到老朋友发来的老照片,原来人真的会变的。即使是那些一直在身边的人,也在不知不觉中变了好多。 ...
    小五的阅读 176评论 0 0
  • 根据杨洋老师的AI+思维模型,分析AI如何能为你熟悉的一个行业/企业提升效率。 在课程中,杨洋老师认为,人工智能的...
    SimonDeng阅读 726评论 0 1