資訊專欄INFORMATION COLUMN
摘要：暫時排除腳本原因。移除二維碼所有樣式，發(fā)現(xiàn)并不是不能識別到二維碼而是識別區(qū)域發(fā)生了偏移。圖移除所有元素，頁面上只留一張二維碼，發(fā)現(xiàn)識別區(qū)域變大。由此產(chǎn)生的問題和猜測問題就是元素偏移了。。。
一、問題概述
在開發(fā)一個含有二維碼的微信頁面時，我遇到了這樣一個問題：使用iPhone第一次進入該頁面時，二維碼可以長按識別，但第二次進入時長按無法識別到二維碼。安卓機都能識別。
二、我和同事進行了以下嘗試：移除控制進入條件的腳本，即部分第一次第二次，長按不能識別二維碼。暫時排除腳本原因。
移除二維碼所有樣式，發(fā)現(xiàn)并不是不能識別到二維碼而是識別區(qū)域發(fā)生了偏移。（圖1）
移除所有元素，頁面上只留一張二維碼，發(fā)現(xiàn)識別區(qū)域變大。雖然整張圖都被識別了但圖片外面的區(qū)域也會被識別。（圖2）
圖1
圖2
階段性結論：二維碼能被長按識別，但因為某種原因識別區(qū)域發(fā)生了偏移。
在網(wǎng)上簡單搜索了偏移問題后，我注意到一條關于標簽的，大意如下：
meta標簽定義了默認縮放為一倍就能識別，不定義就不能識別。于是我將原來的
改成了
雖然樣式飛了但二維碼識別正常了。
看來問題就出在這里了。經(jīng)過嘗試，我發(fā)現(xiàn)：
target-densitydpi=device-dpi和width=device-width是沖突的。加上后者二維碼識別正常了，但樣式肯定要重新定義，若不加，樣式好使，但二維碼識別就不正常了。定義樣式是小事，但歸根結底，發(fā)生偏移的原因到底在哪呢？
關于適配屏幕的標簽
UI設計人員都知道因為pc和移動設備屏幕密度像素的不同在輸出視覺稿的時候要標明空間的倍數(shù)大小，所謂的@1x、@2x就是這個原因。然后在頁面head里寫這樣一個標簽：
即：寬度強制轉換成設備寬度，默認縮放比例為1，最大縮放比例1，不允許手動縮放。
比如按照iPhone6出的設計稿，在開發(fā)的時候空間尺寸就要除以2，iPhone6 plus出的設計稿，尺寸就除以3。具體原理請看圖3
但是如果不想進行單位換算，可以用
即：分辨率轉為設備分辨率……（后邊都一樣）
強制將搭建好的頁面適應移動設備的分辨率。原理就好比是將大尺寸的圖片縮小顯示并不影響清晰度。
這樣給設計和前端開發(fā)人員都帶來很大的方便。既不用設計出標注，也不用切兩套控件出來了。
由此產(chǎn)生的問題和猜測
問題就是元素偏移了。。。但我猜測應該是這樣的：
可視的頁面唄強制“塞”到手機屏幕里，但頁面本身仍然是原始大小的（圖4）。這樣看來，并不是觸控區(qū)域偏移了而是，可視區(qū)域被我們“塞到”了移動設備里。發(fā)生偏移的實際上是我們看到的那部分。
圖3
圖4
找到了這個原因，剩下的就是老老實實的，按照實際尺寸修改css了，將所有定義了固定尺寸的元素的寬高，包括字體都除以2，保留所有百分比定義的尺寸。哪里不對改哪里，工作量著實不小。這樣搭建出來的頁面就是實際大小的，沒有經(jīng)過任何縮放，圖片該在哪就是在哪不會有偏移了。
六、不能解釋的問題為什么該問題只有iPhone存在，或許是因為識別二維碼的機制不同，也可能是因為瀏覽器內(nèi)核原因，安卓的瀏覽器比較健壯。
為什么第一次進入頁面的時候沒有發(fā)生偏移？
歡迎，感謝有類似經(jīng)歷的同行，老師參與討論，留下您的寶貴經(jīng)驗。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49901.html
摘要：暫時排除腳本原因。移除二維碼所有樣式，發(fā)現(xiàn)并不是不能識別到二維碼而是識別區(qū)域發(fā)生了偏移。圖移除所有元素，頁面上只留一張二維碼，發(fā)現(xiàn)識別區(qū)域變大。由此產(chǎn)生的問題和猜測問題就是元素偏移了。。。 一、問題概述 在開發(fā)一個含有二維碼的微信頁面時，我遇到了這樣一個問題：使用iPhone第一次進入該頁面時，二維碼可以長按識別，但第二次進入時長按無法識別到二維碼。安卓機都能識別。 二、我和同事進行了...
摘要：本篇則會介紹瀏覽器的視圖與坐標。返回值為視覺視口的縮放比例視覺視口寬度，返回值為像素值。那么接下來我們來了解一下瀏覽器中的坐標系系統(tǒng)。在數(shù)學里，笛卡爾坐標系英語，也稱直角坐標系，是一種正交坐標系。 作者：陳大魚頭 github： KRISACHAN 在上一篇【Hello CSS】的第二章第二章-CSS的邏輯屬性與盒子模型中提了個問題： 為什么Flex box跟Grid box的是...
摘要：由于蘋果的限制必須配合微信接口做處理。中已修復標簽的設置，會影響二維碼識別我試出來的微信客戶端內(nèi)，如果頁面鏈接中含有未轉碼的特殊字符，可能會導致二維碼無法識別以上如果遇到新的問題會繼續(xù)更新 緩存控制 http接口數(shù)據(jù)緩存 一直在做spa，應用內(nèi)的頁面切換沒有接口數(shù)據(jù)緩存的問題，而從應用內(nèi)切換到外部再回來的話，如果接口地址參數(shù)都不變，那么之前請求過的接口，會使用上一次請求拿到的數(shù)據(jù)，抓包...
閱讀 832·2021-09-07 09:58
閱讀 2689·2021-08-31 09:42
閱讀 2863·2019-08-30 14:18
閱讀 3092·2019-08-30 14:08
閱讀 1837·2019-08-30 12:57
閱讀 2763·2019-08-26 13:31
閱讀 1305·2019-08-26 11:58
閱讀 1059·2019-08-23 18:06
