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