印象最深的一個bug-----ios 微信内置浏覽器微信二維碼長按無法識别

以前在做前端H5的過程中，有這樣一個場景，展示可以讓使用者長按識别的一個公衆号二維碼，頁面做出來後測試發現在安卓版微信能正常識别，但ios版微信（iPhone或iPad）皆無法正常識别。出來問題一開頭固然是懷疑自己的代碼有問題，上網搜尋相關資料，嘗試以下方案均無法解決：

1、定位方式由absolute改為傳統的margin（據說絕對定位會導緻這個問題）；

2、修改viewport上的maximum-scale大于1（網絡上看到的解決方案）；

3、網絡上有說用position：fixed；定位會導緻這個問題，但沒有用到這個屬性；

後來偶然發現可識别區域恰巧比正常地方稍微往上一點，而“比正常地方稍微往上一點是多少呢？經過多次人工檢測，發現上文”比正常地方稍微往上一點“的高度正是微信标題欄+系統狀态欄的高度（64px）。基本上可以确定是iOS版微信的本身問題，原因應該是标題欄+系統狀态欄的高度，經過與微信ios開發人員的回報溝通，确定是微信的bug。

解決方案的話有兩個：

1.通過img增hpadding 增大可接觸面積；這個需要微調。

2.為二維碼圖檔本身增加透明底部背景，類似下圖的樣子，前端上使用者是看不到的；但有個缺點就是如果使用者儲存二維碼後則不是那麼好看。

其他老哥的方案

類似等高布局的原理，注意： 
1.給你的二維碼加上一個巨大的padding:1000px; 
2.二維碼收起來等值的margin:-1000px; 
3.這時候給你的父元素，overflow:hidden 防止布局溢出（看你具體情況） 
4.這個時候，你就發現，長按螢幕中任何位置，都可以讀取出二維碼了

借助padding 可以去實作。margin 做不到
           

我的方案

<img src="img/erweima.png" class="tan_img" />
<img src="img/erweima.png" class="tan_img ios_ma" />
設定第二個img樣式
  img.ios_ma{
    width: 300px;
    height: 300px;
    position: absolute;
    left:0;
    top: -200px;
    opacity: 0;
}
           

完美解決！