带你跳出width=640的坑

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

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

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

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

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

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




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


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


你可能感兴趣的:(HTML5,CSS3)