带你跳出width=640的坑

在做移动端页面开发的时候，习惯用

<meta name="viewport" content="width=640,user-scalable=no">

来显示设备的宽度，然后css就可以用固定的像素值来定位。最后的呈现当然也是十分完美的。

但是，这里面有一个隐藏的bug，就是当你把二维码用img标签写到页面中时，会发现长按二维码没有任何的反应。这是因为用640会让元素的真实位置发生偏移。

然后当你乱点屏幕其他地方时，会发生识别到二维码的情况。

所以根据这个思路，可以把真实的能看到的二维码的位置猜出来然后放上一个透明度为0的img。

这样就能很好地模拟出识别二维码的功能了。

如上图，比如暗绿块是二维码的真实位置，然后红色就是能看到的二维码的真实位置。所以在红色部分再放一个opacity=0的二维码就可以模拟出效果了。

小伙伴们还有什么其他的办法吗？欢迎留言。