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)。影响的识别的效果,他的解决方法是给图片添加内边居使点击的区域增大来解决。