關於viewport引發的微信二維碼識別區域偏移的問題討論與解決

1、問題概述

在開發一個含有二維碼的微信頁面時，我遇到了這樣一個問題：使用iPhone第一次進入該頁面時，二維碼能夠長按識別，但第二次進入時長按沒法識別到二維碼。安卓機都能識別。

2、我和同事進行了如下嘗試：

1. 移除控制進入條件的腳本，即部分第一次第二次，長按不能識別二維碼。暫時排除腳本緣由。

2. 移除二維碼全部樣式，發現並非不能識別到二維碼而是識別區域發生了偏移。（圖1）

3. 移除全部元素，頁面上只留一張二維碼，發現識別區域變大。雖然整張圖都被識別了但圖片外面的區域也會被識別。（圖2）

圖1

圖2
階段性結論：二維碼能被長按識別，但由於某種緣由識別區域發生了偏移。

3、進一步嘗試：

在網上簡單搜索了偏移問題後，我注意到一條關於<meta>標籤的，大意以下：

meta標籤訂義了默認縮放爲一倍就能識別，不定義就不能識別。因而我將原來的

<meta name="viewport" content="target-densitydpi=device-dpi, user-scalable=no">

改爲了

<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1">

雖然樣式飛了但二維碼識別正常了。
看來問題就出在這裏了。通過嘗試，我發現：
target-densitydpi=device-dpi和width=device-width是衝突的。加上後者二維碼識別正常了，但樣式確定要從新定義，若不加，樣式好使，但二維碼識別就不正常了。定義樣式是小事，但歸根結底，發生偏移的緣由到底在哪呢？

4、分析

• 關於適配屏幕的<meta name="viewport">標籤

UI設計人員都知道由於pc和移動設備屏幕密度像素的不一樣在輸出視覺稿的時候要標明空間的倍數大小，所謂的@1x、@2x就是這個緣由。而後在頁面head裏寫這樣一個<meta>標籤：

<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1">

即：寬度強制轉換成設備寬度，默認縮放比例爲1，最大縮放比例1，不容許手動縮放。
好比按照iPhone6出的設計稿，在開發的時候空間尺寸就要除以2，iPhone6 plus出的設計稿，尺寸就除以3。具體原理請看圖3
可是若是不想進行單位換算，能夠用

<meta name="viewport" content="target-densitydpi=device-dpi, user-scalable=no">

即：分辨率轉爲設備分辨率……（後邊都同樣）
強制將搭建好的頁面適應移動設備的分辨率。原理就比如是將大尺寸的圖片縮小顯示並不影響清晰度。
這樣給設計和前端開發人員都帶來很大的方便。既不用設計出標註，也不用切兩套控件出來了。

• 由此產生的問題和猜想

問題就是元素偏移了。。。但我猜想應該是這樣的：
可視的頁面唄強制「塞」到手機屏幕裏，但頁面自己仍然是原始大小的（圖4）。這樣看來，並非觸控區域偏移了而是，可視區域被咱們「塞到」了移動設備裏。發生偏移的其實是咱們看到的那部分。

圖3

圖4

5、問題的解決

找到了這個緣由，剩下的就是老老實實的，按照實際尺寸修改css了，將全部定義了固定尺寸的元素的寬高，包括字體都除以2，保留全部百分比定義的尺寸。哪裏不對改哪裏，工做量着實不小。這樣搭建出來的頁面就是實際大小的，沒有通過任何縮放，圖片該在哪就是在哪不會有偏移了。

6、不能解釋的問題

1. 爲何該問題只有iPhone存在，或許是由於識別二維碼的機制不一樣，也多是由於瀏覽器內核緣由，安卓的瀏覽器比較健壯。

2. 爲何第一次進入頁面的時候沒有發生偏移？

歡迎，感謝有相似經歷的同行，老師參與討論，留下您的寶貴經驗。