在做移动端页面开发的时候,习惯用
<meta name="viewport" content="width=640,user-scalable=no">
来显示设备的宽度,然后css就可以用固定的像素值来定位。最后的呈现当然也是十分完美的。
但是,这里面有一个隐藏的bug,就是当你把二维码用img标签写到页面中时,会发现长按二维码没有任何的反应。这是因为用640会让元素的真实位置发生偏移。
然后当你乱点屏幕其他地方时,会发生识别到二维码的情况。
所以根据这个思路,可以把真实的能看到的二维码的位置猜出来然后放上一个透明度为0的img。
这样就能很好地模拟出识别二维码的功能了。
如上图,比如暗绿块是二维码的真实位置,然后红色就是能看到的二维码的真实位置。所以在红色部分再放一个opacity=0的二维码就可以模拟出效果了。
小伙伴们还有什么其他的办法吗?欢迎留言。