資訊專欄INFORMATION COLUMN
摘要：所以是不能用正常的方法來讓安卓設(shè)備渲染一個物理像素的線。其他的指令自動處理。
最近公司項目要解決一像素問題，自己琢磨了一陣子并且網(wǎng)上搜索了一堆博客，總結(jié)出最好的辦法應(yīng)該是通過css的transform scale縮放1px的內(nèi)容來模擬設(shè)備上1px的效果了。但是這個方法有太多局限。然后秉著css解決不了的問題就用js來解決的原則，然后結(jié)合vue的自定義指令，手?jǐn)]了一個一像素vue自定義指令。打算扔到giuhub留存。順便總結(jié)一下遇到的問題。
項目地址：https://github.com/HelloWorld20/onepx
歡迎各位取用。如有錯誤的地方，也歡迎指正。
原因眾所周知，自從iPhone 4帶來了Retina display后，移動端開始引入了一個叫設(shè)備像素比（devicePixelRatio）的東西。
另一方面，如果給一個html標(biāo)簽寫一個小于1px（H5）的border；IOS可以正常渲染，但是安卓設(shè)備不渲染。所以是不能用正常的方法來讓安卓設(shè)備渲染一個1物理像素的線。
戳這里看DEMO;
當(dāng)然用移動端才能看到效果：
網(wǎng)上的解決方案網(wǎng)上搜能搜出很多解決方案，這篇文章基本匯總了網(wǎng)上的所有方案。然后結(jié)論是：使用css的偽元素來渲染一個1px（H5）的div，并且使用CSS3的scale來縮放dpr倍，從而渲染一個1px物理像素的線。
然而理論畢竟理論，用到項目中的時候還是遇到了很多問題
1. 如果兩個偽元素都被占用，則無法實現(xiàn)網(wǎng)上的方案都是用CSS偽元素來實現(xiàn)的，而偽元素只有before和after兩個，所以要是實際開發(fā)中中占用了before、after，則無法用CSS來實現(xiàn)模擬一像素。
2. 必須手動設(shè)置圓角圓角是最頭疼的問題。用CSS偽元素雖然可以做到圓角，但是CSS偽元素只能通過border-radius: inherit得到和父元素一樣值的圓角大小，縮放之后就不一樣了，且css無法計算縮放后還和父元素一樣的圓角。而且js也不能操作CSS偽元素，所以不得不手動計算dpr，然后給CSS偽元素設(shè)置圓角。
3. -webkit-device-pixel-ratio不是標(biāo)準(zhǔn)方法CSS中判斷設(shè)備設(shè)備像素比的方法是-webkit-device-pixel-ratio，不是標(biāo)準(zhǔn)的方法，所以用起來心慌慌。而JS的window.devicePixelRatio已經(jīng)全面支持，頂多也就一個undefined。完全不用擔(dān)心兼容性問題。
4. 部分標(biāo)簽不能設(shè)置偽元素type為text的input標(biāo)簽就無法在標(biāo)簽內(nèi)插入的dom（雖然控制臺里顯示已經(jīng)被插入，但是不會被渲染出來），所以偽元素也無法給其加上模擬的1像素。
更好的方案本著CSS解決不了的問題就用JS來解決的思想。再結(jié)合Vue提供的自定義指令，可以在想要加1像素的html標(biāo)簽上加上一個指令，js能通過Vue的自定義指令拿到對應(yīng)的DOM，那么就一切皆有可能。
最終實現(xiàn)了一個Vue指令，只需要給對應(yīng)的HTML標(biāo)簽加上一條指令就行。其他的Vue指令自動處理。并且這個指令在我們項目中運行過一段時間，基本是可靠的。
要注意的地方綁定的元素必須顯示聲明其position值為：relative、fixed、absolute之一，不然模擬一像素的div無法定位到位置
務(wù)必給對應(yīng)的DOM清除掉border樣式
不能用于標(biāo)簽等內(nèi)部不能插入元素的標(biāo)簽
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117309.html
摘要：在這里簡單敘述一下我仿某魚部分布局以及功能實現(xiàn)的過程，僅做學(xué)習(xí)用途。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，也完全能夠為復(fù)雜的單頁面應(yīng)用提供驅(qū)動。可以進行確認(rèn)收貨后刪除訂單。 前言 每次寫文章時，總會覺得比寫代碼難多了，可能這就是我表述方面的不足吧，然而寫文章也是可以復(fù)盤一下自己的開發(fā)過程，對自己還是受益良多的。在這里簡單敘述一下我仿某魚部分布局以及功能實現(xiàn)的過程，僅做...
摘要：兩日前，發(fā)了一篇吐槽，莫名的火了一把。關(guān)于的第一個，其實就是聲明一個常量，不允許變更。另外對象迭代這里出自，阮一峰大神寫的入門指南，對象篇。 兩日前，發(fā)了一篇吐槽，莫名的火了一把。經(jīng)過大家的建議與鼓勵，于是修改了簡歷，開始了重新投遞，2天后接到第一份面試邀請。 此文為個人面試經(jīng)歷，QA問答過程與總結(jié)，不透露面試公司及面試人員，內(nèi)容真實，如果有面試過我的大佬看到博客，歡迎指出問題。 循序...
摘要：隨著移動端的發(fā)展，在手機上看電腦端的頁面已成為非常普及現(xiàn)象。方案一固定高度，使其寬度自適應(yīng)這也是我接觸移動端適配第一次使用的方案。 不知不覺做前端已經(jīng)兩年了，從PC端，移動端，微信小程序一路走來到今天剛剛開放注冊的快應(yīng)用(手機廠商對抗小程序的新技能,所以在注冊時用的是qq郵箱的話要去垃圾箱里才能找到注冊郵件)，對于前端圈日新月異的磅礴發(fā)展對于大前端發(fā)展是喜聞樂見的，這次的快應(yīng)用的手機廠...
閱讀 2958·2021-11-24 09:39
閱讀 2868·2021-09-29 09:34
閱讀 3560·2021-09-24 10:23
閱讀 1745·2021-09-22 15:41
閱讀 1701·2019-08-30 15:55
閱讀 3516·2019-08-30 13:58
閱讀 2624·2019-08-30 13:11
閱讀 1668·2019-08-29 12:31
